Kategori
Web Accessibility

Tinjauan Aksesibilitas Web tanpa CSS

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

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.

Kembali ke Daftar Topik

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.

Kembali ke Daftar Topik

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.

Kembali ke Daftar Topik

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.

Kembali ke Daftar Topik

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? :)

Kembali ke Daftar Topik

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.

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).

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.

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

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.