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 membuat 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 yang memiliki semantik dan perilaku pendukung bawaan.

Dalam kursus ini, kita akan membahas beberapa semantik yang kurang jelas dan sangat penting bagi pengguna pembaca layar, terutama terkait navigasi. Pada halaman yang sederhana dengan 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 agregator berita, tidak praktis untuk membaca semuanya dari atas ke bawah; Anda perlu cara untuk menavigasi konten secara efisien.

Developer sering kali salah memahami bahwa pembaca layar membosankan dan lambat digunakan, atau bahwa segala sesuatu di layar harus dapat difokuskan agar pembaca layar dapat menemukannya. 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, sebuah 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 kita ulangi poin sebelumnya: urutan DOM itu 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 daftar judul mengikuti urutan DOM, bukan urutan visual.

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 secara langsung didasarkan pada urutan DOM. Artinya, struktur judul yang tepat kini menjadi lebih penting.

Pada sebagian besar halaman yang terstruktur dengan baik, level judul disusun bertingkat untuk menunjukkan hubungan induk-turunan di antara blok konten. Checklist WebAIM berulang kali merujuk ke teknik ini.

• 1.3.1 menyebutkan "Markup semantik digunakan untuk menunjukkan judul"
• 2.4.1 struktur judul sebutan sebagai teknik untuk mengabaikan blok konten
• 2.4.6 membahas beberapa detail penulisan judul yang berguna
• 2.4.10 menyatakan "setiap bagian konten ditentukan menggunakan judul, jika perlu"

Tidak semua judul harus terlihat di layar. Wikipedia, misalnya, menggunakan teknik yang dengan sengaja menempatkan beberapa judul di luar layar untuk secara khusus 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, cara 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 dapat membantu pengguna pembaca layar untuk menjelajahi halaman, ada elemen lain yang dapat mereka gunakan untuk menjelajahi 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 tersebut. Terkadang, seperti di wiki, ada banyak link, sehingga pembaca dapat menelusuri suatu istilah dalam link tersebut. Hal ini akan 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 tersebut dan teks link tersebut bermakna. Misalnya, berikut beberapa pola umum yang membuat link sulit ditemukan.

• Tag anchor tanpa atribut href. Sering kali digunakan dalam aplikasi satu halaman, target link ini menyebabkan masalah bagi pembaca layar. Anda dapat membaca selengkapnya dalam artikel tentang aplikasi 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 asli dan atur gaya dengan benar.
• Gambar yang digunakan sebagai konten link. Terkadang diperlukan, gambar tertaut mungkin tidak dapat digunakan oleh pembaca layar. Untuk menjamin bahwa link terekspos dengan benar ke teknologi pendukung, pastikan gambar memiliki teks atribut alt.

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

Kesalahan umum yang dilakukan pembaca layar adalah pengucapan. Misalnya, pembaca layar mungkin mengucapkan "gcm" 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 cukup terbiasa dengan keunikan ini dan mempertimbangkannya.

Beberapa developer mencoba memperbaiki situasi ini dengan menyediakan teks khusus pembaca layar yang dieja secara fonetis. Berikut aturan sederhana untuk ejaan fonetik: jangan lakukan; hanya akan memperburuk masalah. Misalnya, jika pengguna menggunakan tampilan braille, kata akan salah eja, sehingga menyebabkan kebingungan lagi. Pembaca layar memungkinkan kata dieja dengan keras, jadi biarkan pembaca mengontrol pengalaman mereka dan memutuskan kapan hal tersebut diperlukan.

Pembaca dapat menggunakan rotor untuk melihat daftar bangunan terkenal. Daftar ini membantu pembaca menemukan konten utama dan kumpulan tempat terkenal 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 bawaan apa pun (yang tetap harus Anda lakukan dengan CSS).

Elemen struktural semantik menggantikan beberapa blok div berulang, serta memberikan cara yang lebih jelas dan lebih deskriptif untuk mengekspresikan struktur halaman secara intuitif bagi penulis dan pembaca.