Semantik dan menavigasi konten

Peran semantik dalam navigasi halaman

Alice Boxhall

Dave Gash

Meggin Kearney

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 usaha, karena banyak elemen standar memiliki semantik dan perilaku pendukung bawaan.

Dalam tutorial ini, kita akan membahas beberapa semantik yang kurang jelas dan 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 dibutuhkan. Namun pada halaman yang sarat konten, seperti entri Wikipedia atau agregator berita, tidak praktis untuk membaca semuanya dari atas ke bawah; Anda perlu cara untuk menavigasi konten secara efisien.

Developer sering kali memiliki kesalahpahaman bahwa pembaca layar membosankan dan lambat digunakan, atau bahwa semua yang ada di layar harus dapat difokuskan oleh pembaca layar. Sering kali tidak seperti itu.

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 bagaimana kita dapat menggunakan {i>heading<i} HTML secara efektif untuk mendukung fitur ini.

Menggunakan {i>heading<i} secara efektif

Pertama, mari ulangi poin sebelumnya: Urutan DOM penting, bukan hanya untuk urutan fokus, tetapi 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 dilihat pembaca layar didasarkan secara langsung pada urutan DOM. Artinya, struktur judul yang tepat menjadi semakin penting.

Di sebagian besar halaman yang terstruktur dengan baik, tingkat heading disusun bertingkat untuk menunjukkan hubungan induk-turunan di antara blok konten. Checklist WebAIM berulang kali mengacu 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 membahas beberapa detail untuk penulisan judul yang berguna
• 2.4.10 menyatakan "setiap bagian konten ditetapkan menggunakan judul, jika sesuai"

Tidak semua judul harus terlihat di layar. Misalnya, Wikipedia menggunakan teknik yang dengan sengaja menempatkan beberapa judul di luar layar agar secara khusus dapat membuatnya hanya dapat diakses 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, cara ini dapat menjadi cara yang baik untuk mengakomodasi judul jika desain visual tidak memerlukan atau memiliki ruang untuk judul yang terlihat.

Opsi navigasi lainnya

Meskipun halaman dengan judul yang baik akan memudahkan pengguna pembaca layar membuka halaman tersebut, 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. Tindakan ini akan membatasi hit ke link yang benar-benar berisi istilah tersebut, 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 di aplikasi web satu halaman, target link ini menyebabkan masalah bagi pembaca layar. Anda dapat membaca selengkapnya dalam artikel tentang aplikasi web satu halaman ini.
• Tombol yang diimplementasikan dengan 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 konten link. Terkadang diperlukan, gambar yang ditautkan tidak dapat digunakan oleh {i>screen reader.<i} Untuk menjamin bahwa link diekspos dengan benar ke teknologi pendukung, pastikan gambar memiliki teks atribut alt.

Masalah lainnya adalah teks link yang buruk. Teks yang dapat diklik seperti "pelajari lebih lanjut" atau "klik di sini" tidak memberikan informasi semantik tentang tempat link berada. 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 membukanya.

Kesalahan umum yang dibuat pembaca layar adalah pengucapan. Misalnya, pembaca layar dapat mengucapkan "MediaStore" 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 keunikan ini dan mempertimbangkannya.

Beberapa developer mencoba memperbaiki situasi ini dengan menyediakan teks khusus pembaca layar yang dieja secara fonetik. Berikut aturan sederhana untuk ejaan fonetik: jangan lakukan; ini hanya akan memperburuk masalah! Misalnya, jika pengguna menggunakan penampil braille, kata tersebut akan salah eja, sehingga menimbulkan 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 tempat terkenal. Daftar ini membantu pembaca menemukan konten utama dan serangkaian penanda navigasi yang disediakan oleh elemen landmark HTML.

HTML5 memperkenalkan beberapa elemen baru yang membantu menentukan struktur semantik halaman, termasuk header, footer, nav, article, section, main, dan aside. Elemen-elemen ini secara khusus memberikan petunjuk struktural di halaman tanpa memaksakan gaya visual bawaan (yang bagaimana pun juga 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.