Peran semantik dalam navigasi halaman
Anda telah mempelajari kemampuan, semantik, dan cara teknologi pendukung menggunakan hierarki aksesibilitas untuk menciptakan pengalaman pengguna alternatif bagi penggunanya. Anda dapat melihat bahwa menulis HTML semantik yang ekspresif memberi Anda banyak aksesibilitas dengan sedikit upaya, karena banyak elemen standar memiliki semantik dan perilaku pendukung bawaan.
Dalam pelajaran ini, kita akan membahas beberapa semantik yang kurang jelas yang sangat penting bagi pengguna pembaca layar, terutama terkait navigasi. Di halaman sederhana dengan banyak kontrol, tetapi tidak banyak konten, Anda dapat dengan mudah memindai halaman untuk menemukan hal yang Anda butuhkan. Namun, di halaman yang berisi banyak konten, seperti entri Wikipedia atau agregator berita, membaca semuanya dari atas ke bawah tidaklah praktis; Anda memerlukan cara untuk menjelajahi konten secara efisien.
Developer sering kali memiliki kesalahpahaman bahwa pembaca layar membosankan dan lama digunakan, atau bahwa semua yang ada di layar harus dapat difokuskan agar pembaca layar dapat menemukannya. Hal ini sering kali tidak terjadi.
Pengguna pembaca layar sering kali mengandalkan daftar judul untuk menemukan informasi. Sebagian besar pembaca layar memiliki cara mudah untuk mengisolasi dan memindai daftar judul halaman, yaitu fitur penting yang disebut rotor. Mari kita lihat cara menggunakan judul HTML secara efektif untuk mendukung fitur ini.
Menggunakan judul secara efektif
Pertama, mari kita ulangi poin sebelumnya: Urutan DOM penting, tidak hanya untuk urutan fokus, tetapi juga untuk urutan pembaca layar. Saat bereksperimen dengan pembaca layar seperti VoiceOver, NVDA, JAWS, dan ChromeVox, Anda akan menemukan bahwa daftar judul mengikuti urutan DOM, bukan urutan visual.
Hal ini berlaku untuk pembaca layar secara umum. Karena pembaca layar berinteraksi dengan hierarki aksesibilitas, dan hierarki aksesibilitas didasarkan pada hierarki DOM, urutan yang dirasakan pembaca layar secara langsung didasarkan pada urutan DOM. Artinya, struktur judul yang sesuai menjadi semakin penting.
Di sebagian besar halaman yang terstruktur dengan baik, tingkat judul disusun bertingkat untuk menunjukkan hubungan induk-turunan di antara blok konten. Checklist WebAIM berulang kali merujuk pada teknik ini.
- 1.3.1 menyebutkan "Markup semantik digunakan untuk menentukan judul"
- 2.4.1 menyebutkan struktur judul sebagai teknik untuk mengabaikan blok konten
- 2.4.6 mendiskusikan beberapa detail untuk menulis judul yang berguna
- 2.4.10 menegaskan "setiap bagian konten ditetapkan menggunakan judul, jika sesuai"
Tidak semua judul harus terlihat di layar. Misalnya, Wikipedia menggunakan teknik yang sengaja menempatkan beberapa judul di luar layar untuk membuatnya dapat diakses hanya oleh pembaca layar dan teknologi pendukung lainnya.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
Untuk aplikasi yang kompleks, ini bisa menjadi cara yang baik untuk mengakomodasi judul saat desain visual tidak memerlukan atau memiliki ruang untuk judul yang terlihat.
Opsi navigasi lainnya
Meskipun halaman dengan judul yang baik membantu pengguna pembaca layar menavigasi, ada elemen lain yang dapat mereka gunakan untuk berpindah di halaman, termasuk link, kontrol formulir, dan landmark.
Pembaca dapat menggunakan fitur rotor pembaca layar (cara mudah untuk mengisolasi dan memindai daftar judul halaman) untuk mengakses daftar link di halaman. Terkadang, seperti di wiki, ada banyak link, sehingga pembaca mungkin menelusuri istilah dalam link. Hal ini membatasi hit ke link yang benar-benar berisi istilah, bukan setiap kemunculan istilah di halaman.
Fitur ini hanya berguna jika pembaca layar dapat menemukan link dan teks link bermakna. Misalnya, berikut beberapa pola umum yang membuat link sulit ditemukan.
- Tag anchor tanpa atribut
href. Sering digunakan dalam aplikasi satu halaman, target link ini menyebabkan masalah bagi pembaca layar. Anda dapat membaca selengkapnya di artikel tentang aplikasi web satu halaman. - Tombol yang diterapkan dengan link. Hal ini menyebabkan pembaca layar menafsirkan konten sebagai link, dan fungsi tombol hilang. Untuk kasus ini, ganti tag anchor dengan tombol sungguhan dan sesuaikan gayanya dengan tepat.
- Gambar yang digunakan sebagai konten link. Terkadang, gambar tertaut yang diperlukan dapat
tidak dapat digunakan oleh pembaca layar. Untuk menjamin bahwa link ditampilkan dengan benar ke
teknologi pendukung, pastikan gambar memiliki teks atribut
alt.
Teks link yang buruk adalah masalah lain. Teks yang dapat diklik seperti "pelajari lebih lanjut" atau "klik di sini" tidak memberikan informasi semantik tentang tujuan link. Sebagai gantinya, gunakan teks deskriptif seperti "pelajari lebih lanjut desain responsif" atau "lihat tutorial kanvas ini" untuk membantu pembaca layar memberikan konteks yang bermakna tentang link.
Rotor juga dapat mengambil daftar kontrol formulir. Dengan daftar ini, pembaca dapat menelusuri item tertentu dan langsung membukanya.
Error umum yang dilakukan pembaca layar adalah pengucapan. Misalnya, pembaca layar mungkin mengucapkan "Udacity" sebagai "oo-dacity", atau membaca nomor telepon sebagai bilangan bulat besar, atau membaca teks berhuruf besar seolah-olah itu adalah akronim. Menariknya, pengguna pembaca layar cukup terbiasa dengan keanehan ini dan mempertimbangkannya.
Beberapa developer mencoba memperbaiki situasi ini dengan menyediakan teks khusus pembaca layar yang dieja secara fonetik. Berikut adalah aturan sederhana untuk ejaan fonetik: jangan lakukan; hal ini hanya akan memperburuk masalah. Misalnya, jika pengguna menggunakan layar braille, kata akan salah dieja, sehingga menyebabkan lebih banyak kebingungan. Pembaca layar memungkinkan kata dieja dengan lantang, jadi biarkan pembaca mengontrol pengalaman mereka dan memutuskan kapan hal ini diperlukan.
Pembaca dapat menggunakan rotor untuk melihat daftar penanda. Daftar ini membantu pembaca menemukan konten utama dan serangkaian penanda navigasi yang disediakan oleh elemen penanda HTML.
HTML5 memperkenalkan beberapa elemen baru yang membantu menentukan struktur semantik
halaman, termasuk header, footer, nav, article, section, main, dan
aside. Elemen ini secara khusus memberikan petunjuk struktural di halaman
tanpa memaksa gaya visual bawaan (yang harus Anda lakukan dengan CSS).
Elemen struktur semantik menggantikan beberapa blok div berulang, dan
memberikan cara yang lebih jelas dan lebih deskriptif untuk mengekspresikan struktur halaman secara intuitif
baik bagi penulis maupun pembaca.