Pembaca layar memiliki perintah untuk berpindah dengan cepat antar-judul atau ke wilayah penanda tertentu. Faktanya, survei terhadap pengguna pembaca layar menemukan bahwa mereka paling sering menavigasi halaman yang tidak dikenal dengan menjelajahi judul.
Dengan menggunakan elemen heading dan penanda yang benar, Anda dapat meningkatkan pengalaman navigasi di situs Anda secara signifikan bagi pengguna teknologi pendukung.
Menggunakan judul untuk menguraikan halaman
Gunakan elemen h1-h6 untuk membuat garis besar struktural untuk halaman Anda. Tujuannya adalah
membuat kerangka atau struktur halaman sehingga siapa pun yang menavigasi berdasarkan
judul dapat membentuk gambaran mental.
Praktik umum adalah menggunakan satu h1 untuk judul utama atau logo di halaman, elemen h2 untuk menentukan bagian utama, dan elemen h3 di subbagian pendukung:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Jangan lewati tingkat judul
Developer sering kali melewati tingkat heading untuk menggunakan gaya default browser yang sangat cocok dengan desain mereka. Hal ini dianggap sebagai antipola karena merusak model garis luar.
Daripada mengandalkan ukuran font default browser untuk judul, gunakan CSS Anda sendiri, dan jangan lewati level.
Misalnya, situs ini memiliki bagian yang disebut "BERITA", diikuti dengan dua judul:
Judul bagian, "BERITA", dapat berupa h2, dan judul
pendukung dapat berupa elemen h3.
Karena font-size untuk "BERITA" lebih kecil daripada judul, Anda mungkin
tergoda untuk membuat judul cerita pertama menjadi h2 dan membuat
"BERITA" menjadi h3. Meskipun mungkin cocok dengan gaya default browser,
hal ini akan merusak garis batas yang disampaikan kepada pengguna pembaca layar.
Meskipun mungkin tampak tidak intuitif, tidak masalah jika secara visual elemen
h3 dan h4 lebih besar daripada elemen h2 atau h1.
Yang penting adalah garis batas yang disampaikan oleh elemen dan urutan elemen.
Anda dapat menggunakan Lighthouse untuk memeriksa apakah halaman Anda melewati tingkat heading. Jalankan audit Aksesibilitas (Lighthouse > Options > Accessibility) dan cari hasil audit Headings don't skip levels.
Menggunakan penanda untuk membantu navigasi
Elemen HTML5 seperti main, nav, dan aside berfungsi sebagai penanda, atau
area khusus di halaman yang dapat diakses pembaca layar.
Gunakan tag penanda untuk menentukan bagian utama halaman Anda, bukan mengandalkan
div. Berhati-hatilah agar tidak berlebihan karena memiliki terlalu banyak penanda dapat
membuat pengguna kewalahan. Misalnya, gunakan hanya satu elemen main, bukan 3 atau
4.
Lighthouse merekomendasikan pengauditan situs Anda secara manual untuk memeriksa apakah "elemen penanda HTML5 digunakan untuk meningkatkan navigasi". Anda dapat menggunakan daftar elemen penanda ini untuk memeriksa halaman Anda.
Melewati konten berulang dengan link lompat
Banyak situs berisi navigasi berulang di header-nya, yang dapat mengganggu navigasi dengan teknologi pendukung. Gunakan link lewati untuk memungkinkan pengguna melewati konten ini.
Link lewati adalah penanda di luar layar yang selalu menjadi item pertama yang dapat difokuskan di DOM. Biasanya, bagian ini berisi link dalam halaman ke konten utama halaman. Karena merupakan elemen pertama di DOM, hanya diperlukan satu tindakan dari teknologi pendukung untuk memfokuskan dan melewati navigasi berulang.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
Banyak situs populer seperti GitHub, The NY
Times, dan Wikipedia semuanya
berisi link lewati. Coba kunjungi halaman tersebut dan tekan tombol TAB di keyboard Anda beberapa kali.
Lighthouse dapat membantu Anda memeriksa apakah halaman Anda berisi link lewati. Jalankan Audit aksesibilitas lagi dan cari hasil audit Halaman berisi judul, link lewati, atau wilayah landmark.