Kategori
Web Accessibility

Bukan Tutorial – Aksesibilitas CSS

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:

  • h1h6 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”

Pak Aldy,
justru struktur yang jujur dan polos itu lebih mudah terdengar oleh pengguna pembaca layar komputer. Dibanding sekadar mengandalkan kemampuan visual mata telanjang.

ardianzzz,
untuk menyerupai dl tapi penomoran berurut, sepertinya bisa dengan kustomisasi/kombinasi ol, ‘headings’, dan li. Paragraf di li dikustomisasi sedemikian rupa dengan text-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 atau dl sepertinya cukup.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.