Elemen penanda HTML5 digunakan untuk meningkatkan navigasi

Elemen HTML5 seperti main, nav, dan aside berfungsi sebagai penanda, atau wilayah khusus pada halaman tempat {i>screen reader<i} dan teknologi bantu lainnya bisa melompat. Dengan menggunakan elemen {i>landmark<i}, Anda dapat meningkatkan pengalaman navigasi secara signifikan di situs untuk pengguna teknologi pendukung. Pelajari lebih lanjut di Deque University Penanda ARIA dan HTML 5.

Cara memeriksa tempat terkenal secara manual

Gunakan daftar elemen tempat terkenal W3C untuk memeriksa apakah setiap bagian utama dari laman Anda dimuat oleh elemen {i>landmark<i}. 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 Microsoft Ekstensi Insight Aksesibilitas untuk memvisualisasikan struktur laman dan menangkap bagian yang tidak terdapat dalam {i>landmark<i}:

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 menunjukkan struktur halaman Anda. Misalnya, elemen <main> harus menyertakan semua konten yang terkait langsung ke ide utama halaman, jadi seharusnya hanya ada satu per halaman. Lihat ringkasan MDN tentang elemen bagian konten untuk mempelajari cara menggunakan setiap {i>landmark<i}.
  • Gunakan {i>landmark<i} dengan bijak. Memiliki terlalu banyak {i>landmark<i} justru dapat membuat navigasi lebih sulit bagi pengguna teknologi pendukung karena hal ini membuat mereka tidak bisa dengan mudah melewati konten yang diinginkan.

Lihat postingan Judul dan tempat terkenal untuk informasi selengkapnya.

Resource