Hierarki aksesibilitas

Pengantar Hierarki Aksesibilitas

Alice Boxhall

Dave Gash

Meggin Kearney

Bayangkan Anda sedang membangun antarmuka pengguna khusus untuk pengguna pembaca layar. Di sini, Anda tidak perlu membuat UI visual sama sekali, tetapi cukup memberikan informasi yang cukup untuk digunakan oleh pembaca layar.

Yang akan Anda buat adalah semacam API yang mendeskripsikan struktur halaman, mirip dengan DOM API, tetapi Anda dapat mengabaikan beberapa informasi dan node, karena banyak informasi tersebut hanya berguna untuk presentasi visual. Hasilnya mungkin terlihat seperti ini.

Pada dasarnya, inilah yang sebenarnya ditampilkan browser ke pembaca layar. Browser mengambil hierarki DOM dan memodifikasinya menjadi bentuk yang berguna untuk teknologi pendukung. Kami menyebut hierarki yang dimodifikasi ini sebagai Hierarki Aksesibilitas.

Anda mungkin memvisualisasikan hierarki aksesibilitas seperti halaman web lama dari tahun 90-an: beberapa gambar, banyak link, mungkin kolom dan tombol.

Memindai halaman secara visual seperti dalam kasus ini akan memberi Anda pengalaman yang mirip dengan yang akan didapatkan pengguna pembaca layar. Antarmukanya ada, tetapi sederhana dan langsung, mirip dengan antarmuka hierarki aksesibilitas.

Hierarki aksesibilitas adalah hal yang paling sering berinteraksi dengan teknologi pendukung. Alurnya kira-kira seperti ini.

1. Aplikasi (browser atau aplikasi lain) 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 lisan dari aplikasi.
3. Teknologi pendukung juga dapat memungkinkan pengguna berinteraksi dengan aplikasi dengan cara yang berbeda. Misalnya, sebagian besar pembaca layar menyediakan hook untuk memungkinkan pengguna menyimulasikan klik mouse atau ketukan jari dengan mudah.
4. Teknologi pendukung menyampaikan niat pengguna (seperti "klik") kembali ke aplikasi melalui Accessibility API. Selanjutnya, aplikasi bertanggung jawab untuk menafsirkan tindakan dengan tepat dalam konteks UI asli.

Untuk browser web, ada langkah tambahan di setiap arah, karena browser sebenarnya adalah platform untuk aplikasi web yang berjalan di dalamnya. 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, semua itu adalah tanggung jawab browser. Tugas kita sebagai developer web hanyalah menyadari bahwa hal ini sedang terjadi, dan mengembangkan halaman web yang memanfaatkan proses ini untuk menciptakan pengalaman yang mudah diakses bagi pengguna kita.

Kami melakukannya dengan memastikan bahwa kami mengekspresikan semantik halaman kami dengan benar: memastikan bahwa elemen penting di halaman memiliki peran, status, dan properti aksesibilitas yang benar, serta bahwa kami menentukan label aksesibilitas dan deskripsi. Browser kemudian dapat mengizinkan teknologi pendukung mengakses informasi tersebut untuk menciptakan pengalaman yang disesuaikan.

Semantik dalam 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 seperti yang diharapkan di berbagai platform. Dengan demikian, aksesibilitas untuk elemen HTML native seperti link atau tombol akan ditangani secara otomatis. Kita dapat memanfaatkan aksesibilitas bawaan tersebut dengan menulis HTML yang mengekspresikan semantik elemen halaman kita.

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

Elemen ini dapat dibuat dalam HTML dengan berbagai cara; salah satu caranya ditunjukkan di bawah.

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

Jika kita tidak menggunakan elemen tombol yang sebenarnya, pembaca layar tidak akan dapat mengetahui elemen yang sedang difokuskan. Selain itu, kita harus melakukan pekerjaan tambahan dengan menambahkan tabindex agar dapat digunakan oleh pengguna yang hanya menggunakan keyboard karena, seperti yang dikodekan sekarang, elemen ini hanya dapat digunakan dengan mouse.

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

Sebelumnya, kami telah menyebutkan bahwa pembaca layar akan mengumumkan peran, nama, status, dan nilai elemen. Dengan menggunakan elemen semantik yang tepat, peran, status, dan nilai akan tercakup, tetapi kita juga harus memastikan bahwa kita membuat nama elemen 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 saat tidak diperlukan label visual.

Untuk elemen tingkat teks, kita tidak perlu melakukan apa pun, karena menurut definisi, elemen tersebut akan memiliki beberapa konten teks. Namun, untuk elemen input atau kontrol, dan konten visual seperti gambar, kita perlu memastikan bahwa kita menentukan nama. Bahkan, menyediakan alternatif teks untuk konten non-teks adalah item pertama dalam checklist WebAIM.

Salah satu caranya adalah dengan mengikuti rekomendasi mereka bahwa "Input formulir memiliki label teks terkait". Ada dua cara untuk mengaitkan label dengan elemen formulir, seperti kotak centang. Salah satu metode tersebut menyebabkan teks label juga menjadi target klik untuk kotak centang, yang juga berguna bagi pengguna mouse atau layar sentuh. Untuk mengaitkan label dengan elemen, Anda dapat

• 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 telah diberi label dengan benar, pembaca layar dapat melaporkan bahwa elemen tersebut memiliki peran kotak centang, dalam status dicentang, dan diberi nama "Terima penawaran promosi?".