Semantik dan menavigasi konten

Peran semantik dalam navigasi halaman

Alice Boxhall

Dave Gash

Meggin Kearney

Anda telah mempelajari kemampuan, semantik, dan bagaimana teknologi pendukung menggunakan pohon 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 pelajaran ini, kita akan membahas beberapa semantik yang kurang penting bagi pengguna pembaca layar, terutama dalam hal navigasi. Dalam halaman sederhana dengan banyak kontrol tetapi tidak banyak konten, mudah untuk memindai laman untuk menemukan apa yang dibutuhkan. Namun pada halaman yang sarat konten, seperti entri Wikipedia atau berita {i>aggregator<i}, tidaklah praktis untuk membaca semuanya dari atas ke bawah; Anda membutuhkan cara untuk menavigasi konten secara efisien.

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

Pengguna pembaca layar sering kali mengandalkan daftar judul untuk menemukan informasi. Paling sering {i>Screen reader<i} memiliki cara mudah untuk mengisolasi dan memindai daftar {i>heading<i}, 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 penting, bukan hanya untuk urutan fokus, tetapi untuk urutan pembaca layar. Saat Anda bereksperimen dengan pembaca layar seperti VoiceOver, NVDA, JAWS, dan ChromeVox, Anda akan menemukan daftar heading berikut urutan DOM daripada urutan visual.

Hal ini berlaku untuk pembaca layar secara umum. Karena pembaca layar berinteraksi dengan pohon aksesibilitas, dan hierarki aksesibilitas didasarkan pada pohon DOM, yaitu urutan yang dilihat pembaca layar secara langsung didasarkan pada urutan DOM. Ini berarti struktur {i>heading<i} yang sesuai menjadi semakin penting.

Di sebagian besar halaman yang terstruktur dengan baik, tingkat {i>heading<i} disarangkan untuk menunjukkan hubungan induk-turunan di antara blok konten. WebAIM checklist berulang kali merujuk pada hal ini. standar.

• 1.3.1 menyebutkan "Markup semantik digunakan untuk menentukan judul"
• 2.4.1 menyebutkan struktur {i>heading<i} sebagai teknik untuk memintas blok konten
• 2.4.6 membahas beberapa detail untuk menulis {i>heading <i}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 sengaja menempatkan beberapa judul di luar layar untuk membuatnya secara khusus 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 penerapan yang kompleks, ini bisa menjadi cara yang baik untuk mengakomodasi {i>heading <i}ketika desain visual tidak memerlukan atau memiliki ruang untuk {i>heading<i} yang terlihat.

Opsi navigasi lainnya

Meskipun halaman dengan {i>heading<i} yang baik membantu pengguna pembaca layar menavigasi, ada elemen lain yang dapat digunakan untuk berpindah di halaman, termasuk link, formulir kontrol, 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, jadi pembaca mungkin mencari istilah dalam tautan. Cara ini akan membatasi klik pada link yang benar-benar berisi istilah, bukan setiap kemunculan istilah di halaman.

Fitur ini hanya berguna jika pembaca layar dapat menemukan link dan link bermakna. Misalnya, berikut ini beberapa pola umum yang membuat tautan sulit ditemukan.

• Tag anchor tanpa atribut href. Sering digunakan di halaman tunggal aplikasi, target tautan ini menyebabkan masalah bagi pembaca layar. Anda dapat baca selengkapnya di 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. Sebagai dalam kasus ini, ganti tag anchor dengan tombol asli dan beri gaya dengan tepat.
• Gambar digunakan sebagai konten link. Terkadang diperlukan, gambar bertautan dapat tidak dapat digunakan oleh pembaca layar. Untuk menjamin bahwa link terekspos dengan benar ke teknologi pendukung, pastikan gambar memiliki alt teks atribut.

Masalah lainnya adalah teks link yang buruk. Teks yang dapat diklik seperti "pelajari lebih lanjut" atau "klik di sini" tidak memberikan informasi semantik tentang ke mana tautan tersebut berada. Sebagai gantinya, gunakan teks deskriptif seperti "pelajari lebih lanjut tentang desain responsif" atau "lihat kanvas ini tutorial" untuk membantu pembaca layar memberikan konteks yang bermakna tentang link.

Rotor juga dapat mengambil daftar kontrol formulir. Dengan menggunakan daftar ini, pembaca dapat mencari item tertentu dan langsung membukanya.

Kesalahan umum yang dibuat pembaca layar adalah pengucapan. Misalnya, layar pembaca mungkin mengucapkan "{i>udad<i}" sebagai "oo-dacity", atau membaca nomor telepon sebagai bilangan bulat besar, atau membaca huruf kapital seolah-olah adalah sebuah akronim. Menariknya, pengguna pembaca layar cukup terbiasa dengan keunikan ini dan memahaminya pertimbangan.

Beberapa developer mencoba memperbaiki situasi ini dengan menyediakan akses khusus pembaca layar teks yang dieja secara fonetik. Berikut ini aturan sederhana untuk ejaan fonetik: jangan lakukan; itu hanya memperburuk masalah! Misalnya, jika seorang pengguna menggunakan penampil braille, kata akan salah eja, sehingga kebingungan. Pembaca layar memungkinkan kata dieja dengan lantang, jadi serahkan pada pembaca untuk mengontrol pengalamannya 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 HTML elemen {i>landmark<i}.

HTML5 memperkenalkan beberapa elemen baru yang membantu mendefinisikan struktur semantik dari halaman, termasuk header, footer, nav, article, section, main, dan aside. Elemen-elemen ini secara khusus memberikan petunjuk struktural pada laman tanpa memaksa gaya bawaan (yang bagaimana pun juga harus Anda lakukan dengan CSS).

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