Pembaca layar memiliki perintah untuk beralih dengan cepat antar-judul atau ke {i>landmark.<i} Bahkan, survei terhadap pengguna pembaca layar menemukan bahwa mereka paling sering menavigasi laman yang tidak dikenal dengan menjelajahi {i>heading<i}.
Dengan menggunakan elemen tajuk dan penanda yang tepat, Anda dapat secara dramatis meningkatkan pengalaman navigasi di situs Anda bagi pengguna teknologi alat bantu.
Gunakan judul untuk menguraikan halaman
Gunakan elemen h1-h6 untuk membuat garis batas struktur untuk halaman Anda. Tujuannya adalah
untuk membuat kerangka atau perancah laman
sehingga siapa pun yang menavigasi melalui
{i>heading<i} dapat membentuk
gambaran mental.
Praktik yang umum adalah menggunakan h1 tunggal untuk judul atau logo utama pada
halaman, elemen h2 untuk menetapkan 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
Pengembang sering kali melewatkan tingkat {i>heading<i} untuk menggunakan gaya {i>default<i} browser yang sesuai dengan desain mereka. Hal ini dianggap sebagai anti-pola karena rusak model garis besar.
Alih-alih mengandalkan ukuran {i>font <i}default {i>browser<i} untuk judul, gunakan di CSS Anda sendiri, dan tidak melewati level.
Misalnya, situs ini memiliki bagian yang disebut "IN THE NEWS", diikuti dengan dua judul:
Judul bagian, "IN THE NEWS", dapat berupa h2, dan bagian pendukung
judul dapat berupa elemen h3.
Karena font-size untuk "IN THE NEWS" lebih kecil dari judul.
tergoda untuk menjadikan judul berita pertama sebagai h2 dan membuat
"DI BERITA" h3. Meskipun itu mungkin cocok
dengan gaya {i>default<i} browser,
hal itu akan merusak garis besar yang disampaikan kepada pengguna pembaca layar!
Anda dapat menggunakan Lighthouse untuk memeriksa apakah halaman Anda melewati tingkat judul. Jalankan Audit aksesibilitas (Lighthouse > Options > Accessibility) dan lihat untuk 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
wilayah khusus pada halaman tempat
pembaca layar dapat melompat.
Gunakan tag penanda untuk menentukan bagian utama halaman, bukan mengandalkan
div dtk. Berhati-hatilah untuk tidak berlebihan karena memiliki terlalu banyak tempat terkenal dapat
luar biasa. Misalnya, tetap gunakan satu elemen main, bukan 3 atau
4.
Lighthouse merekomendasikan untuk mengaudit situs Anda secara manual untuk memeriksa apakah "landmark HTML5 digunakan untuk meningkatkan navigasi.“ Anda dapat menggunakan daftar tempat terkenal ini yang berbeda untuk memeriksa halaman Anda.
Abaikan konten berulang dengan link lewati
Banyak situs berisi navigasi berulang di header-nya, yang dapat mengganggu untuk menavigasi dengan teknologi pendukung. Gunakan link lewati agar pengguna dapat mengabaikan konten ini.
Link lewati adalah anchor di luar layar yang selalu menjadi item pertama yang dapat difokuskan di DOM. Biasanya, halaman ini berisi link dalam halaman yang mengarah ke konten utama halaman. Karena hal itu elemen pertama di DOM, hanya diperlukan satu tindakan dari teknologi pendukung untuk fokus dan melewati navigasi yang 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 dan tekan tombol TAB di
{i>keyboard<i} beberapa kali.
Lighthouse dapat membantu memeriksa apakah halaman Anda berisi link lewati. Jalankan Audit aksesibilitas lagi dan cari hasil dari Halaman berisi audit heading, skip link, atau landmark.