Diperbarui 12 November 2017 oleh Dani Iswara
Dengan menonaktifkan CSS, struktur dokumen Web tampak aslinya. Tanpa kosmetik dan hiasan penunjang. Hampir serupa seperti yang dibaca/disuarakan oleh pembaca layar atau ‘screen reader’. Ini salah satu cara manual mengevaluasi aksesibilitas Web.
Menyesuaikan dengan logika pembaca layar, kita bisa melihat apakah struktur dokumen Web mudah dimengerti dan digunakan. Apakah urutannya sudah cukup logis sesuai konteks pengguna?
Daftar Topik
- Baris atas.
- Mencari via kotak telusur.
- Reduplikasi teks alternatif.
- Label yang aksesibel.
- Menu pintas lain.
Baris atas
Kita mulai. Baris paling atas bisa jadi sangat menentukan. Apakah pengguna harus mendengarkan semua menu navigasi dan menu tambahan lain dulu? Menu tambahan bisa berupa menu dan konten di bilah samping/’sidebar’, ‘widget’, kumpulan tulisan terkini, tulisan terpopuler, komentar terbaru, dan sebagainya. Terutama pada struktur bilah samping yang mendahului konten utama. Lalu, apakah harus memilih bilah samping di kanan (layar pengguna)? Walaupun berkolom tiga, CSS sepertinya bisa membantu. Harus melalui semua itu sebelum mencapai konten utama? Di sinilah fungsi menu ‘Skip to main content’ bisa dihandalkan.
Mencari via kotak telusur
Sudah punya target yang ingin dicari? Kolom telusur bisa dimanfaatkan. Daripada menelusuri bagian arsip lainnya. Bahkan kolom pencarian biasanya memiliki accesskey
(‘keyboard shortcuts’) tersendiri untuk standar di Inggris.
Reduplikasi teks alternatif
Teks alternatif di sini bisa berupa atribut alt
dan title
. Pemakaian atribut ‘title’ memang dipengaruhi tema/’theme’ dan bawaan mesin blog. Baca kembali Web accessibility and title attribute of WordPress blog. Reduplikasi percuma itu misalnya:
<a href="http://example.com/post-title-one/" title="permanent link to post title one">post title one</a>
<a href="http://example.com/category/category-name-two" title="view all posts in category name two">category name two</a>
Jika fitur pembacaan atribut ‘title’ di pembaca layar diaktifkan, baris-baris di atas akan terdengar seperti berikut:
link permanent link to post title one post title one
link view all posts in category name two category name two
Mungkin karena alasan seringnya duplikasi ini, fitur pembaca atribut ‘title’ umumnya tidak aktif pada setelan standar perangkat pembaca layar.
Rekomendasi dari WCAG, atribut title sebaiknya berisi informasi tambahan (bukan informasi utama) yang melengkapi teks ‘anchor’. Bukan pengulangan percuma. Mengapa hanya informasi yang sifatnya tambahan? Karena atribut ‘title’ tidak sepenuhnya aksesibel. Tergantung pada tetikus.
Dulu, atribut ini sangat disarankan untuk digunakan karena dianggap membantu pembaca layar. Tapi, karena sering disalahgunakan demi pengoptimalan mesin telusur Internet, kini pemakaiannya tidak lagi terlalu direkomendasikan.
Label yang aksesibel
Jika elemen label
digunakan sebagaimana dianjurkan oleh WCAG, pembaca layar akan membaca, misalnya kolom telusur dan komentar di blog Dani Iswara .Com, seperti di bawah ini:
find colon edit go button ... name left paren required right paren edit email left paren kept private, required right paren edit uri slash website left paren optional right paren edit ...
Lihat kembali Label yang Mudah Diakses. Saat elemen ‘label’ diklik dengan kursor atau papan ketik, kursor akan fokus pada kotak ‘input’.
Sebagai perbandingan, jika ‘label’ ada di sisi kanan, akan terdengar:
edit name left paren required right paren edit email left paren private, required right paren edit website left paren optional right paren
Karena kolom ‘input’ mendahului elemen ‘label’ (kecuali disetel berbeda via CSS), pertanyaannya: edit what? Setelah mengetahui ‘edit…name’, pengguna harus kembali ke kolom ‘input’ untuk mengisi nama. Atau kursor akan otomatis kembali ke kolom ‘input’ jika elemen ‘label’ dieksekusi/berfungsi.
Menu pintas lain
Mas Iskandaria sempat menulis tentang Cara Membuat Quick Link Menuju Kotak Komentar. Teknik ini bisa membantu pengguna menemukan konten yang diinginkan dengan lebih cepat.
Bagaimana kembali ke bagian paling atas tanpa banyak menggulung/’scrolling’? Bagaimana caranya merujuk ke bagian lain di halaman yang sama? Hal tersebut serupa fungsinya dengan ‘skip to main content’ di atas. Apalagi jika konten berupa hal tanya jawab (FAQ) atau banyak mendefinisikan suatu topik. Termasuk juga tombol reply komentar.
Jika menu pintas lain dianggap cukup membantu, mengapa ‘skip to main content’ tidak? :)
Dengan menelanjangi konten, mematikan tampilan CSS, struktur dokumen Web jadi relatif lebih mudah dianalisis/ditinjau atau di-‘review’.
12 tanggapan untuk “Tinjauan Aksesibilitas Web tanpa CSS”
Hmm.., acara telanjangnya sudah selesai ya Bli, kok cepet banget?
Oh ya, saya baru sadar kalau dalam setiap
abbr
tidak selalu muncul question mark saat kursor dilayangkan di atasnya.OOT, jadi beberapa hari sebelumnya memang bersifat ujicoba aksesibilitas weblog bli ?
Saya tidak banyak menemukan blog yang berkeinginan memberikan kemudahan ( terkecuali blogger senior ), yang saya temukan justru kebanyakan yang penting enak dilhat ( dari sisi pemilik blog ).
Bahkan saya pernah menemukan ada tombol yang dalam posisi hover justru menjadi hilang ( warna hover sama dengan warna latar ).
Cahya,
CSS Naked Day tiap tanggal 9 April. Bisa ikut 24 jam lokal, atau 48 jam waktu internasional.
Setelan kursor di abbr, acronym bisa diatur di CSS.
Pak Aldy,
itu memang CSS Naked Day.
Mungkin targetnya memang pengguna dengan kemampuan visual yang baik, pak. Toh pengguna umumnya memang lebih menyukai tampilan visual. :)
Bli Dani,
Tampilkan visual memang memikat dan lebih nyaman dimata, tetapi jika visualisasinya berlebihan seperti pentas artis menurut saya juga kurang baik.
Apa karena saya termasuk golongan penganut tampilan yang simpel ?
Kayaknya HTML saya harus diperdalam lagi, tadi coba-coba naked CSS dilokalan, tampilannya tidak karuan.
Pak Aldy,
untuk konten tertentu kan gampang..tinggal di-disable yang tidak perlu. :)
Skip to main content sebenarnya ingin coba saya terapkan di blog saya. Tapi malah lupa terus Bli. Thx sudah mengingatkan kembali. Thx juga buat referensinya ke artikel saya :) (saya mau nyoba setting via CSS untuk quick/jump-linknya).
Iskandaria,
saya kan cuman ngasi question mark aja, bukan maksa atau mewajibkan lho ya… :)
aduh berat2 artikelnya, tapi kalau tidak di pelajari malah berhenti di titik yang sama. setidaknya sedikit mengerti tentang tag title, dapet pencerahannya disini :D
OOT: hari lahir wa jadi CSS Naked Day.
Denny,
kan memang catatan tidak penting, jadi ngga usah diberat-beratin deh mikirnya.. :P
Maksudnya atribut title ya? Yang tag title belum sempat ditulis di sini.
Ooo Aries juga ya..met ultah.. :)
Mengenai atribut title pada abbr, menurut saya kurang aksesibel jika diakses dengan perangkat mobile seperti operamini. Saya kebetulan pernah mengikuti diskusi di blog ini dan mas cahya, dan pernah disodorkan singkatan. Saya pikir itu apa (karena ga ada keterangannya), setelah saya buka melalui peramban baru kelihatan kalau itu abbr bertitle
[…] yang terasa tidak aksesibel di peramban ‘mobile’. Komentarnya ada di tulisan Tinjauan Aksesibilitas Web tanpa CSS. Mengenai atribut title pada ‘abbr’, menurut saya kurang aksesibel jika diakses dengan […]
[…] keteraksesan juga bisa dilakukan saat mematikan CSS. Silakan baca kembali Tinjauan Aksesibilitas Web tanpa CSS (Dani Iswara […]