Elemen penanda HTML5 digunakan untuk meningkatkan navigasi

Elemen HTML5 seperti main, nav, dan aside berfungsi sebagai penanda, atau wilayah khusus di halaman tempat pembaca layar dan teknologi pendukung lainnya dapat berpindah. Dengan menggunakan elemen penanda, Anda dapat meningkatkan pengalaman navigasi di situs secara drastis untuk pengguna teknologi pendukung. Pelajari lebih lanjut di HTML 5 dan ARIA Landmarks Deque University.

Cara memeriksa penanda secara manual

Gunakan daftar elemen penanda W3C untuk memeriksa apakah setiap bagian utama halaman Anda berisi elemen penanda. Contoh:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

Anda juga dapat menggunakan alat seperti ekstensi Accessibility Insights Microsoft untuk memvisualisasikan struktur halaman dan menemukan bagian yang tidak terdapat dalam penanda:

Screenshot web.dev dengan penanda yang ditandai oleh ekstensi Aksesibilitas Insight

Cara menggunakan penanda secara efektif

  • Gunakan elemen penanda untuk menentukan bagian utama halaman Anda, bukan mengandalkan elemen umum seperti <div> atau <span>.
  • Gunakan penanda untuk menyampaikan struktur halaman Anda. Misalnya, elemen <main> harus menyertakan semua konten yang terkait langsung dengan ide utama halaman, sehingga hanya boleh ada satu per halaman. Lihat ringkasan elemen pembagian konten MDN untuk mempelajari cara menggunakan setiap penanda.
  • Gunakan penanda dengan bijak. Memiliki terlalu banyak penanda sebenarnya dapat membuat navigasi lebih sulit bagi pengguna teknologi pendukung karena mencegah mereka untuk dengan mudah melewati bagian konten yang diinginkan.

Lihat postingan Judul dan penanda untuk mengetahui informasi selengkapnya.

Resource