Pohon Aksesibilitas

Pengantar Pohon Aksesibilitas

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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

Yang akan Anda buat adalah jenis API yang mendeskripsikan struktur halaman, mirip dengan DOM API, tetapi Anda dapat menghindarinya dengan lebih sedikit informasi dan node yang lebih sedikit, karena banyak dari informasi tersebut hanya berguna untuk presentasi visual. Mungkin terlihat seperti ini.

tiruan DOM API pembaca layar

Inilah yang sebenarnya disajikan oleh browser ke pembaca layar. Browser mengambil hierarki DOM dan memodifikasinya menjadi bentuk yang berguna untuk teknologi pendukung. Kami menyebut pohon yang dimodifikasi ini sebagai Pohon Aksesibilitas.

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

halaman web bergaya 1990-an

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

Pohon aksesibilitas adalah hal yang berinteraksi dengan sebagian besar {i>assistive technology<i}. Alurnya seperti ini.

  1. Aplikasi (browser atau aplikasi lain) mengekspos versi semantik UI-nya kepada teknologi pendukung melalui API.
  2. Teknologi pendukung dapat menggunakan informasi yang dibaca melalui API untuk membuat presentasi antarmuka pengguna alternatif bagi pengguna. Misalnya, pembaca layar membuat antarmuka tempat pengguna mendengar representasi aplikasi secara lisan.
  3. Teknologi pendukung juga dapat memungkinkan pengguna berinteraksi dengan aplikasi dengan cara yang berbeda. Misalnya, sebagian besar pembaca layar menyediakan hook yang memungkinkan pengguna dengan mudah menyimulasikan klik mouse atau ketukan jari.
  4. Teknologi pendukung menyampaikan intent pengguna (seperti "klik") kembali ke aplikasi melalui API aksesibilitas. Aplikasi kemudian 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 ke dalam 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 kami sebagai developer web hanyalah mengetahui bahwa hal ini sedang terjadi, dan mengembangkan halaman web yang memanfaatkan proses ini untuk menciptakan pengalaman yang dapat diakses oleh pengguna kami.

Kami melakukannya dengan memastikan bahwa kami mengekspresikan semantik halaman kami dengan benar: memastikan bahwa elemen penting di halaman memiliki peran, status, dan properti yang dapat diakses yang benar, dan bahwa kami menentukan nama serta deskripsi yang dapat diakses. Kemudian, browser dapat mengizinkan teknologi pendukung mengakses informasi tersebut untuk menciptakan 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 dapat diprediksi di berbagai platform. Aksesibilitas untuk elemen HTML native seperti link atau tombol akan ditangani secara otomatis. Kita bisa memanfaatkan aksesibilitas bawaan itu dengan menulis HTML yang mengekspresikan semantik elemen laman kita.

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

Tampilkan taco

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

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

Bila kita tidak menggunakan elemen tombol yang sebenarnya, pembaca layar tidak memiliki cara untuk mengetahui apa yang telah dibuka. Selain itu, kita harus melakukan pekerjaan ekstra dengan menambahkan tabindex agar dapat digunakan oleh pengguna khusus keyboard karena, seperti yang dikodekan sekarang, hanya dapat digunakan dengan mouse.

Kita dapat memperbaikinya dengan mudah menggunakan elemen button reguler, bukan div. Menggunakan elemen native juga bermanfaat dalam menangani interaksi keyboard bagi kita. Perlu diingat bahwa Anda tidak harus kehilangan efek visual yang menarik hanya karena menggunakan elemen native. Anda dapat menata gaya elemen native agar terlihat seperti yang Anda inginkan dan tetap mempertahankan semantik dan semantik implisit.

Sebelumnya, kita telah mencatat bahwa pembaca layar akan membacakan peran, nama, status, dan nilai elemen. Dengan menggunakan elemen semantik, peran, status, dan nilai yang tepat dicakup, tetapi kita juga harus memastikan bahwa kita menjadikan 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 label visual tidak diperlukan.

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, serta konten visual seperti gambar, kita perlu memastikan bahwa kita menentukan nama. Bahkan, memberikan alternatif teks untuk konten non-teks adalah item pertama dalam checklist WebAIM.

Salah satu cara untuk melakukannya adalah mengikuti rekomendasi bahwa "Input formulir memiliki label teks yang terkait". Ada dua cara untuk mengaitkan label dengan elemen formulir, seperti kotak centang. Kedua 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, baik

  • 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 memiliki peran kotak centang, dalam status dicentang, dan diberi nama "Menerima penawaran promosi?".

output teks di layar dari VoiceOver yang menampilkan label lisan untuk kotak centang