Pohon Aksesibilitas

Pengantar Hierarki Aksesibilitas

Alice Boxhall

Dave Gash

Meggin Kearney

Bayangkan Anda sedang membuat antarmuka pengguna khusus untuk pengguna pembaca layar. Di sini, Anda tidak perlu membuat UI visual sama sekali, melainkan cuma menyediakan informasi yang cukup untuk digunakan pembaca layar.

Yang akan Anda buat adalah semacam API yang menjelaskan struktur halaman, mirip dengan DOM API, tetapi Anda dapat menghindar dengan sedikit informasi dan simpul lebih sedikit, karena banyak dari informasi tersebut hanya berguna untuk presentasi visual. Tampilannya mungkin seperti ini.

Pada dasarnya inilah yang sesungguhnya akan disajikan ke pembaca layar. Browser mengambil hierarki DOM dan mengubahnya menjadi suatu bentuk yang berguna untuk teknologi pendukung. Kami menyebut hierarki yang telah dimodifikasi ini sebagai Hierarki Aksesibilitas.

Anda mungkin membayangkan hierarki aksesibilitas ini seperti mirip dengan halaman web lama dari tahun 90-an: beberapa gambar, banyak link, mungkin satu kolom dan tombol.

Dengan memindai laman secara visual seperti ini akan memberi Anda pengalaman yang mirip dengan apa yang akan didapat oleh pengguna pembaca layar. Antarmuka memang ada, tetapi sederhana dan langsung, mirip sekali dengan antarmuka hierarki aksesibilitas.

Kebanyakan teknologi pendukung berinteraksi dengan hierarki aksesibilitas. Alurnya seperti ini.

1. Aplikasi (browser atau aplikasi lainnya) mengekspos versi semantik UI-nya ke teknologi pendukung melalui API.
2. Teknologi pendukung dapat menggunakan informasi yang dibacanya melalui API untuk membuat presentasi antarmuka pengguna alternatif bagi pengguna. Misalnya, pembaca layar membuat antarmuka tempat pengguna mendengar representasi aplikasi yang dibacakan.
3. Teknologi pendukung juga dapat memungkinkan pengguna berinteraksi dengan aplikasi dalam cara yang berbeda. Misalnya, sebagian besar pembaca layar menyediakan hook untuk memungkinkan pengguna dengan mudah menyimulasikan klik mouse atau ketukan jari.
4. Teknologi pendukung menyampaikan intent pengguna (seperti "klik") kembali ke aplikasi melalui API aksesibilitas. Selanjutnya, aplikasi bertanggung jawab untuk menafsirkan tindakan dengan benar dalam konteks UI asli.

Untuk browser web, ada langkah ekstra di setiap arah, karena browser sebenarnya adalah platform untuk menjalankan aplikasi web. Jadi, browser perlu menerjemahkan aplikasi web menjadi hierarki aksesibilitas, dan harus memastikan bahwa peristiwa yang sesuai diaktifkan di JavaScript berdasarkan tindakan pengguna yang berasal dari teknologi pendukung.

Namun, itu semua adalah tanggung jawab browser. Tugas kita sebagai developer web adalah mengetahui bahwa hal ini terjadi, dan mengembangkan halaman web yang memanfaatkan proses ini untuk membuat pengalaman yang dapat diakses oleh pengguna kita.

Kita melakukannya dengan memastikan bahwa kita mengekspresikan semantik halaman dengan benar: memastikan elemen penting di halaman memiliki peran, status, dan properti yang dapat diakses dengan benar, dan bahwa kita menentukan nama dan deskripsi yang dapat diakses. Selanjutnya, browser dapat mengizinkan teknologi pendukung mengakses informasi tersebut untuk membuat pengalaman yang disesuaikan.

Semantik di HTML native

Browser dapat mengubah hierarki DOM menjadi hierarki aksesibilitas karena sebagian besar DOM memiliki makna semantik implisit. Artinya, DOM menggunakan elemen HTML native yang dikenali oleh browser dan berfungsi dengan cara yang bisa diprediksi pada berbagai platform. Aksesibilitas untuk elemen HTML native seperti link atau tombol dengan demikian ditangani secara otomatis. Kita dapat memanfaatkan aksesibilitas bawaan tersebut dengan menulis HTML yang mengekspresikan semantik elemen halaman kita.

Namun, terkadang kita menggunakan elemen yang tampak seperti elemen native, tetapi bukan. Misalnya, "tombol" ini bukanlah tombol sama sekali.

Ini dapat dibuat di HTML dengan banyak cara; salah satu caranya ditampilkan di bawah ini.

<div class="button-ish">Give me tacos</div>

Jika kita tidak menggunakan elemen tombol yang sebenarnya, pembaca layar tidak memiliki cara untuk mengetahui telah sampai di mana. Selain itu, kita harus melakukan pekerjaan tambahan menambahkan tabindex agar dapat digunakan oleh pengguna khusus keyboard karena, seperti yang dikode sekarang, tabindex hanya dapat digunakan dengan mouse.

Kita dapat memperbaikinya dengan mudah menggunakan elemen button biasa, bukan div. Penggunaan elemen native juga memiliki manfaat dalam menangani interaksi keyboard untuk kita. Dan ingat, Anda tidak perlu kehilangan efek visual keren hanya karena menggunakan elemen native. Anda dapat menata gaya elemen native agar terlihat seperti yang diinginkan dan tetap mempertahankan semantik dan perilaku implisit.

Sebelumnya kita telah memperhatikan bahwa pembaca layar akan membacakan peran, nama, status, dan nilai elemen. Dengan menggunakan elemen semantik, peran, status, dan nilai yang tepat, semuanya akan tercakup, tetapi kita juga harus memastikan bahwa kita membuat nama elemen yang dapat ditemukan.

Secara umum, ada dua jenis nama:

• Label yang terlihat, yang digunakan oleh semua pengguna untuk mengaitkan makna dengan elemen, dan
• Alternatif teks, yang hanya digunakan jika tidak memerlukan label visual.

Untuk elemen level teks, kita tidak perlu melakukan apa pun, karena menurut definisi, elemen tersebut akan berisi beberapa konten teks. Namun, untuk elemen input atau kontrol, serta konten visual seperti gambar, kita perlu memastikan bahwa kita menetapkan sebuah nama. Sebenarnya, menyediakan alternatif teks untuk konten non-teks adalah item pertama dalam checklist WebAIM.

Salah satu cara untuk melakukannya adalah dengan mengikuti rekomendasinya bahwa "Input formulir memiliki label teks terkait". Ada dua cara untuk mengaitkan label dengan elemen formulir, seperti kotak centang. Salah satu metode ini menyebabkan teks label juga menjadi target klik untuk kotak centang, sehingga juga berguna bagi pengguna mouse atau layar sentuh. Untuk mengaitkan label dengan elemen, bisa dengan

• Menempatkan elemen input di dalam elemen label

<label>
    <input type="checkbox">Receive promotional offers?
</label>

atau

• Gunakan atribut for label dan lihat id elemen

<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

Jika kotak centang diberi label dengan benar, pembaca layar dapat melaporkan bahwa elemen memiliki peran kotak centang, dalam status dicentang, dan diberi nama "Terima penawaran promosi?".