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, tetapi cukup berikan informasi untuk digunakan oleh pembaca layar.

Yang akan Anda buat adalah semacam API yang menjelaskan struktur halaman, ke DOM API, tetapi Anda bisa melewatkan informasi yang lebih sedikit dan simpul yang lebih sedikit, karena banyak dari informasi tersebut yang hanya berguna untuk presentasi visual. Ini mungkin terlihat seperti ini.

Pada dasarnya inilah yang sebenarnya disajikan oleh browser ke pembaca layar. Tujuan mengambil pohon DOM dan memodifikasinya menjadi suatu bentuk yang berguna untuk teknologi pendukung. Kami menyebut pohon yang dimodifikasi ini sebagai Hierarki.

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

Memindai halaman ke bawah secara visual seperti kasus ini memberi Anda pengalaman yang mirip dengan apa yang akan diperoleh pengguna pembaca layar. Antarmukanya ada, tetapi sederhana dan langsung, mirip dengan antarmuka pohon aksesibilitas.

Pohon aksesibilitas adalah apa yang berinteraksi dengan sebagian besar teknologi pendukung. Tujuan alurnya berjalan seperti ini.

1. Sebuah aplikasi (browser atau aplikasi lain) mengekspos versi semantiknya UI ke teknologi pendukung melalui API.
2. Teknologi pendukung dapat menggunakan informasi yang dibaca melalui API untuk membuat presentasi antarmuka pengguna alternatif untuk pengguna. Misalnya, pembaca layar membuat antarmuka di mana pengguna mendengar yang mewakili aplikasi Anda.
3. Teknologi {i>assistive<i} juga dapat memungkinkan pengguna untuk berinteraksi dengan aplikasi dengan cara yang berbeda. Misalnya, sebagian besar {i>screen reader<i} menyediakan {i>hook<i} untuk memungkinkan untuk dengan mudah melakukan simulasi klik mouse atau ketukan jari.
4. Teknologi pendukung menyampaikan maksud pengguna (seperti "klik") kembali ke aplikasi melalui API aksesibilitas. Aplikasi kemudian bertanggung jawab untuk tafsirkan tindakan dengan tepat dalam konteks UI asli.

Untuk {i>browser<i} web, ada langkah tambahan di setiap arah, karena {i>browser<i} 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 dari teknologi pendukung.

Namun, itu semua adalah tanggung jawab browser. Tugas kami sebagai pengembang web hanya mengetahui bahwa hal ini sedang terjadi, dan untuk mengembangkan laman web yang memanfaatkan proses ini untuk menciptakan pengalaman yang dapat diakses oleh pengguna kami.

Kami melakukannya dengan memastikan bahwa kami menyatakan semantik halaman kami dengan benar: memastikan bahwa elemen penting dalam laman memiliki akses yang benar peran, status, dan properti, dan kita menentukan nama yang dapat diakses dan deskripsi. Kemudian {i>browser<i} dapat mengizinkan teknologi pendukung mengakses untuk menciptakan pengalaman yang disesuaikan.

Semantik di HTML native

Browser bisa mengubah hierarki DOM menjadi hierarki aksesibilitas karena DOM memiliki makna semantik implisit. Artinya, DOM menggunakan HTML native elemen yang dikenali oleh browser dan bekerja dengan cara yang dapat diprediksi pada berbagai di seluruh platform Google. Aksesibilitas untuk elemen HTML native seperti link atau tombol adalah sehingga ditangani secara otomatis. Kita dapat memanfaatkan aksesibilitas bawaan itu dengan menulis HTML yang mengekspresikan semantik elemen halaman kita.

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

Kode ini dapat dibuat di HTML dengan berbagai cara; satu arah ditampilkan di bawah ini.

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

Ketika kita tidak menggunakan elemen tombol yang sebenarnya, pembaca layar tidak memiliki cara untuk telah mendarat. Selain itu, kita harus melakukan pekerjaan tambahan untuk menambahkan tabindex untuk membuatnya dapat digunakan oleh pengguna {i>keyboard<i} saja karena, seperti yang dikodekan sekarang, hanya dapat digunakan dengan mouse.

Kita dapat dengan mudah memperbaikinya menggunakan elemen button biasa, bukan div. Menggunakan elemen native juga memberikan manfaat untuk menjaga keyboard interaksi untuk kita. Dan ingat, Anda tidak perlu kehilangan visual keren efek hanya karena Anda menggunakan elemen native; Anda dapat menata gaya elemen native untuk membuatnya terlihat seperti yang Anda inginkan dan tetap mempertahankan semantik implisit dan perilaku model.

Sebelumnya kita telah mencatat bahwa {i>screen reader<i} akan mengumumkan peran elemen, nama, status, dan nilai. Dengan menggunakan elemen, peran, status, dan nilai semantik yang tepat dibahas, 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 ketika tidak memerlukan visualisasi label.

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

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

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

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