Judul dan penanda

Rob Dodson

Pembaca layar memiliki perintah untuk berpindah dengan cepat antar-judul atau ke wilayah penanda tertentu. Faktanya, survei pengguna pembaca layar menemukan bahwa mereka paling sering membuka halaman yang tidak dikenal dengan menjelajahi judul.

Dengan menggunakan elemen judul dan penanda yang benar, Anda dapat meningkatkan pengalaman navigasi di situs secara drastis bagi pengguna teknologi pendukung.

Menggunakan judul untuk membuat garis besar halaman

Gunakan elemen h1-h6 untuk membuat garis besar struktural untuk halaman Anda. Tujuannya adalah membuat kerangka atau scaffold 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 dalam mendukung subbagian:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

Jangan lewati tingkat judul

Developer sering kali melewati tingkat judul untuk menggunakan gaya default browser yang sangat cocok dengan desain mereka. Hal ini dianggap sebagai antipola karena melanggar model garis besar.

Daripada mengandalkan ukuran font default browser untuk judul, gunakan CSS Anda sendiri, dan jangan lewati level.

Misalnya, situs ini memiliki bagian yang disebut "DALAM BERITA", diikuti dengan dua judul utama:

Situs berita dengan judul, gambar utama, dan subbagian.

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 artikel pertama menjadi h2 dan membuat "IN THE NEWS" menjadi h3. Meskipun mungkin cocok dengan gaya visual default browser, hal ini akan merusak garis batas yang disampaikan kepada pengguna pembaca layar.

Anda dapat menggunakan Lighthouse untuk memeriksa apakah halaman Anda melewatkan tingkat judul. 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 landmark, atau wilayah khusus di halaman yang dapat dituju oleh pembaca layar.

Gunakan tag penanda untuk menentukan bagian utama halaman, bukan mengandalkan div. Berhati-hatilah agar tidak berlebihan karena memiliki terlalu banyak penanda dapat menjadi terlalu banyak. Misalnya, gunakan hanya 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 penanda ini untuk memeriksa halaman Anda.

Melewati konten berulang dengan link lewati

Banyak situs berisi navigasi berulang di headernya, yang dapat mengganggu navigasi dengan teknologi pendukung. Gunakan link lewati untuk memungkinkan pengguna melewati konten ini.

Link lewati adalah anchor offscreen yang selalu menjadi item pertama yang dapat difokuskan di DOM. Biasanya, halaman 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 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 di keyboard beberapa kali.

Lighthouse dapat membantu Anda memeriksa apakah halaman Anda berisi link lewati. Jalankan audit Aksesibilitas lagi dan cari hasil audit Halaman ini berisi judul, link lewati, atau wilayah penanda.