Diperbarui 24 Januari 2011 oleh Dani Iswara
Dokumen W3C tentang Accessibility Features of CSS (1999) jelas menyarankan pemisahan konten sesuai standar Web. Sajikan Web dengan memisahkan:
- struktur semantik (X)HTML,
- konten teks, gambar, foto, animasi, audio, flash, dan multimedia lain.
- presentasi atau tampilan warna, posisi kolom, urutan konten.
Penulisan markah disebut lebih bersih. Jelas siapa yang bertanggung jawab atas tampilan atau visualisasi. Dari sisi semantik, mudah diketahui markah mana yang bertugas menyajikan makna, terutama bagi pembaca layar komputer. Pemisahan sesuai standar Web juga menghindari kesalahan pemakaian elemen Web atau ‘tags misuse’.
Tag misuse—the practice of misusing a structural element for its expected stylistic effects.
Misalnya:
h1
–h6
untuk sekadar memperbesar ukuran teks, padahal bukan judul atau subjudul.blockquote
untuk memperoleh efek visual berbeda dengan teks lain, padahal bukanlah bermakna kuotasi.textarea
—yang bukan kolom isian—untuk menyajikan kumpulan pranala, sehingga mengecoh pembaca layar komputer.font
untuk memperoleh efek visual teks spesial seperti subjudul & penekanan makna, tapi tidak dapat dimengerti oleh pembaca layar komputer.table
untuk ‘layout’, padahal semestinya untuk menyajikan data tabular.
Keuntungan ‘Cascading Style Sheets’ dari sisi aksesibilitas:
Memudahkan pemeliharaan situs
Serupa dengan konsep standar Web. Daripada harus mengubah tiap CSS ‘inline’ yang ditulis manual di tiap artikel untuk memperoleh tampilan yang berbeda. Desainer dan pengembang Web sangat diuntungkan dengan fitur ini. Terutama saat merombak desain Web karya orang lain.
‘Style sheet’ pilihan pengguna
Pengguna juga bisa memilih untuk memakai ‘style sheet’-nya sendiri sesuai fitur aksesibilitas di tiap peramban Web modern. Ada penyandang disabilitas yang lebih suka teks gelap di atas latar terang, pun sebaliknya. Atau teks biru di atas latar kuning. Lebih suka serif dibanding sans-serif? Manfaatkan fitur aksesibilitas di tiap peramban. Mungkin butuh ekstensi tertentu.
Struktur asli konten lebih jelas terlihat
Matikan CSS. Di Firefox, coba eksplorasi menu View » Page Style » No Style. Struktur konten yang disembunyikan via CSS—display:none
—akan tampak jelas. Bisa terlihat logis tidaknya urutan konten.
Dari sisi visual SEO, tidak masalah bilah sisi ada di kiri atau kanan. Yang penting struktur aslinya. Yang dibaca mesin pembaca layar komputer dan mesin telusur/pencari Internet.
Mungkin akan ditemukan menu ‘skip to main content’, urutan asli kolom/bilah sisi—karena float
dan position
, kolom komentar yang tersembunyi, atau elemen lain yang tidak terlihat secara visual.
Teks berkedip diijinkan di WCAG 2.0. Tapi harus bisa dikendalikan di sisi pengguna. Sehingga teks berkedip yang memakai text-decoration:blink
masih dianggap aksesibel. Sepertinya properti ini hanya dimengerti oleh peramban Web bermesin Presto (Opera) dan Gecko (Firefox).
CSS Naked Day dan logisnya konten (Dani Iswara .com) sepertinya masih akan menarik diikuti.
Penomoran dan penanda otomatis
Misalnya pada elemen ‘listing’ dengan ul
dan ol
dibantu list-style-type
. Daripada membuat manual. Berisiko salah urutan nomor. Adanya penanda di suatu urutan akan meningkatkan keterbacaan.
Memberi ‘whitespace’
Lebih nyaman saat menikmati konten. Fokus pengguna lebih tercapai. Ruang visual tidak terlihat sesak. Manfaatkan margin
, padding
, line-height
, dan sejenisnya, semaksimal mungkin.
…authors can create space on four sides of an element’s content instead of adding non-breaking spaces ( ), which are non-standard mark-up, to create space around an element.
Evaluasi keteraksesan juga bisa dilakukan saat mematikan CSS. Silakan baca kembali Tinjauan Aksesibilitas Web tanpa CSS (Dani Iswara .com).
Selalu ada pengecualian. Pemakaian CSS cara klasik tentu masih memungkinkan untuk penyajian contoh, tutorial, dan keterbatasan fitur mesin blog gratis.
Maaf, saya bukan tutor. Tulisan inipun bukan tutorial.
7 tanggapan untuk “Bukan Tutorial – Aksesibilitas CSS”
Kalau naked CSS kelihatan bagian-bagian yang ada bopengnya :D
Pak Aldy,
justru struktur yang jujur dan polos itu lebih mudah terdengar oleh pengguna pembaca layar komputer. Dibanding sekadar mengandalkan kemampuan visual mata telanjang.
Sayang tidak ada atribut list style untuk definition list ya… :D
ardianzzz,
untuk menyerupai
dl
tapi penomoran berurut, sepertinya bisa dengan kustomisasi/kombinasiol
, ‘headings’, danli
. Paragraf dili
dikustomisasi sedemikian rupa dengantext-indent
,display:block
, sepertinya bisa ya. Baru angan-angan, belum saya coba.Menurut saya, jika penomoran harus berurut, cukup pakai
ol
. Jika tidak harus berurut,ul
ataudl
sepertinya cukup.he..he..he… blog saya masih banyak salahnya Bli, masih mengutamakan pada sisi visual saja.
Rudy Azhar,
sah saja mengedepankan visual. Toh memang itu nilai kebergunaannya lebih banyak. Tidak masalah, menurut saya.
[…] Aksesibilitas CSS […]