Pembaca layar memiliki perintah untuk beralih dengan cepat antar-judul atau ke wilayah landmark tertentu. Faktanya, survei pengguna pembaca layar menemukan bahwa mereka paling sering membuka halaman yang tidak dikenal dengan menjelajahi judul.
Dengan elemen judul dan penanda yang tepat, Anda dapat meningkatkan pengalaman navigasi secara signifikan di situs bagi pengguna teknologi pendukung.
Menggunakan judul untuk membuat garis besar halaman
Gunakan elemen h1-h6 untuk membuat garis batas struktural bagi halaman Anda. Tujuannya adalah
untuk membuat kerangka atau scaffold halaman sehingga siapa pun yang menavigasi dengan
judul dapat membentuk gambaran mental.
Praktik yang umum adalah menggunakan satu h1 untuk judul atau logo utama di
halaman, elemen h2 untuk menentukan bagian utama, dan elemen h3 dalam 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 level judul untuk menggunakan gaya default browser yang sangat cocok dengan desain mereka. Ini dianggap antipola karena merusak model outline.
Daripada mengandalkan ukuran font default browser untuk judul, gunakan CSS Anda sendiri, dan jangan lewati level.
Misalnya, situs ini memiliki bagian yang disebut "IN THE NEWS", diikuti oleh dua judul:
Judul bagian, "IN THE NEWS", dapat berupa h2, dan judul
pendukung dapat berupa elemen h3.
Karena font-size untuk "IN THE NEWS" lebih kecil daripada judul, Anda mungkin
tergoda untuk membuat judul untuk cerita pertama sebagai h2 dan menjadikan
"IN THE NEWS" sebagai h3. Meskipun mungkin cocok dengan gaya default browser,
hal tersebut akan merusak garis luar yang disampaikan kepada pengguna pembaca layar.
Anda dapat menggunakan Lighthouse untuk memeriksa apakah halaman Anda melewati setiap level judul. Jalankan audit Aksesibilitas (Lighthouse > Options > Accessibility) dan cari hasil audit Headings don't skip levels.
Menggunakan {i>landmark<i} untuk membantu navigasi
Elemen HTML5 seperti main, nav, dan aside berfungsi sebagai landmark, atau
area khusus di halaman tempat pembaca layar dapat melompat.
Gunakan tag tempat terkenal untuk menentukan bagian utama halaman Anda, bukan mengandalkan div. Berhati-hatilah untuk tidak berlebihan karena memiliki terlalu banyak {i>landmark<i} bisa
membuat kewalahan. Misalnya, hanya gunakan satu elemen main, bukan 3 atau
4.
Lighthouse merekomendasikan untuk mengaudit situs Anda secara manual untuk memeriksa apakah "elemen penanda HTML5 digunakan untuk meningkatkan navigasi". Anda dapat menggunakan daftar elemen tempat terkenal ini untuk memeriksa halaman Anda.
Abaikan konten berulang dengan link lewati
Banyak situs berisi navigasi berulang di headernya, yang dapat mengganggu navigasi dengan teknologi pendukung. Gunakan lewati link agar pengguna dapat mengabaikan konten ini.
Link lewati adalah anchor offscreen yang selalu menjadi item pertama yang dapat difokuskan dalam DOM. Biasanya, link ini berisi link dalam halaman ke konten utama halaman. Karena merupakan elemen pertama dalam DOM, teknologi pendukung hanya memerlukan satu tindakan untuk memfokuskannya dan mengabaikan 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 buka dan tekan tombol TAB pada
keyboard 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 tempat terkenal.