Elemen penanda HTML5 digunakan untuk meningkatkan navigasi

Elemen HTML5 seperti main, nav, dan aside berfungsi sebagai tempat terkenal, atau wilayah khusus pada halaman tempat pembaca layar dan teknologi pendukung lainnya dapat melompat. Dengan menggunakan elemen tempat terkenal, Anda dapat meningkatkan pengalaman navigasi secara signifikan di situs bagi pengguna teknologi pendukung. Pelajari lebih lanjut di Penanda HTML 5 dan ARIA, Universitas Deque.

Cara memeriksa tempat terkenal secara manual

Gunakan daftar elemen penanda W3C untuk memeriksa apakah setiap bagian utama pada 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 Anda dan menangkap bagian yang tidak terdapat dalam tempat terkenal:

Screenshot web.dev dengan tempat terkenal yang ditandai oleh ekstensi Accessibility Insights

Cara menggunakan {i>landmark<i} secara efektif

  • Gunakan elemen penanda untuk menentukan bagian utama halaman Anda, bukan mengandalkan elemen umum seperti <div> atau <span>.
  • Gunakan {i>landmark<i} untuk mengilustrasikan struktur halaman Anda. Misalnya, elemen <main> harus menyertakan semua konten yang terkait langsung dengan ide utama halaman, sehingga hanya boleh ada satu konten per halaman. Lihat ringkasan MDN tentang elemen pemisahan konten untuk mempelajari cara menggunakan setiap penanda.
  • Gunakan {i>landmark<i} dengan bijaksana. Memiliki terlalu banyak tempat terkenal sebenarnya dapat membuat navigasi lebih sulit bagi pengguna teknologi pendukung karena hal tersebut mencegah mereka untuk langsung membuka konten yang diinginkan.

Lihat postingan Judul dan tempat terkenal untuk informasi selengkapnya.

Referensi