Peran semantik dalam navigasi halaman
Anda telah mempelajari kemampuan, semantik, dan cara teknologi pendukung menggunakan hierarki aksesibilitas untuk menciptakan pengalaman pengguna alternatif bagi pengguna mereka. 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 dimengerti namun sangat penting bagi pengguna pembaca layar, terutama berkenaan dengan navigasi. Di halaman sederhana yang berisi banyak kontrol, tetapi tidak banyak konten, akan mudah memindai halaman untuk menemukan apa yang Anda butuhkan. Namun, pada halaman yang sarat konten, seperti entri Wikipedia atau aggregator berita, tidak praktis membaca tuntas semua hal dari atas ke bawah; Anda memerlukan cara untuk menjelajahi konten secara efisien.
Developer sering kali salah memahami bahwa pembaca layar membosankan dan lambat digunakan, atau bahwa segala sesuatu di layar harus bisa difokus agar pembaca layar dapat menemukannya. Sering kali bukan itu masalahnya.
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 heading HTML secara efektif untuk mendukung fitur ini.
Menggunakan judul secara efektif
Pertama, mari kita ulangi poin sebelumnya: Urutan DOM penting, bukan hanya untuk urutan fokus, tetapi juga untuk urutan pembaca layar. Saat bereksperimen dengan pembaca layar seperti VoiceOver, NVDA, JAWS, dan ChromeVox, Anda akan menemukan 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 dipahami oleh pembaca layar dengan demikian didasarkan langsung pada urutan DOM. Artinya, struktur judul yang tepat menjadi semakin penting.
Di sebagian besar halaman yang terstruktur dengan baik, level judul disusun bertingkat untuk menunjukkan hubungan induk-turunan di antara blok konten. Daftar periksa WebAIM berulang kali merujuk teknik ini.
- 1.3.1 menyebutkan "Markup semantik digunakan untuk menunjukkan judul"
- 2.4.1 menyebutkan struktur judul sebagai teknik untuk mengabaikan blok konten
- 2.4.6 mendiskusikan beberapa detail untuk penulisan heading yang berguna
- 2.4.10 menegaskan "setiap bagian konten ditetapkan menggunakan judul, jika sesuai"
Tidak semua judul harus terlihat di layar. Wikipedia, misalnya, 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>
Bagi aplikasi yang kompleks, ini bisa menjadi cara yang bagus untuk mengakomodasi heading jika desain visual tidak memerlukan atau memiliki ruang bagi heading yang terlihat.
Opsi navigasi lainnya
Meskipun halaman dengan judul yang baik membantu navigasi pengguna pembaca layar, 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 tautan, sehingga pembaca mungkin menelusuri suatu istilah dalam tautan tersebut. Hal ini akan membatasi hit pada 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 kali digunakan dalam aplikasi laman tunggal, target link ini menyebabkan masalah bagi pembaca layar. Anda dapat membaca selengkapnya di artikel tentang aplikasi web satu halaman ini. - Tombol yang diimplementasikan bersama link. Hal ini menyebabkan pembaca layar menafsirkan konten sebagai link, dan fungsi tombol akan hilang. Untuk kasus ini, ganti tag anchor dengan tombol sungguhan dan tata gayanya dengan benar.
- Gambar digunakan sebagai materi tautan. Terkadang diperlukan, gambar tertaut dapat
tidak dapat digunakan oleh pembaca layar. Untuk menjamin bahwa link diekspos dengan benar ke
teknologi pendukung, pastikan gambar memiliki teks atribut
alt.
Masalah lain adalah tautan yang buruk. Teks yang dapat diklik seperti "pelajari lebih lanjut" atau "klik di sini" tidak memberikan informasi semantik tentang tujuan link tersebut. Sebagai gantinya, gunakan teks deskriptif seperti "pelajari desain responsif lebih lanjut" 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 menuju ke sana.
Kesalahan umum yang dibuat 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 sudah sangat terbiasa dengan keganjilan ini dan telah memperhitungkannya.
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; ini hanya akan memperburuk masalah! Jika, misalnya, pengguna menggunakan layar braille, kata akan salah eja, sehingga menyebabkan lebih banyak kebingungan. Pembaca layar memungkinkan kata dieja dengan lantang, jadi biarkan pembaca mengontrol pengalaman mereka dan memutuskan kapan hal tersebut 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. Semua elemen ini secara spesifik memberikan petunjuk struktural di halaman
tanpa memaksakan penataan gaya bawaan (yang harus Anda lakukan dengan CSS).
Elemen struktural semantik menggantikan beberapa blok div yang berulang, serta
memberikan cara yang lebih jelas dan deskriptif untuk mengekspresikan struktur halaman secara intuitif
bagi penulis dan pembaca.