Semantic Elements untuk Accessibility

Section Semantic HTML membahas header, nav, main, dan kawanannya dari sisi makna konten. Chapter ini melihat sisi yang sama dari telinga: apa yang didengar pengguna pembaca layar saat fokus melintas wilayah-wilayah itu. Jawabannya satu kata kunci: landmark — penanda wilayah halaman yang bisa dilompati seperti heading, tetapi satu tingkat lebih besar.

Pengguna pembaca layar memakai landmark untuk berpindah bagian besar: melewati menu yang sama di setiap halaman, masuk langsung ke isi, atau memeriksa kaki halaman.

Landmark yang Diumumkan #

Mekanismenya: pembaca layar mengenali peran elemen semantik, lalu mengumumkan namanya dalam istilah Inggris setiap kali fokus masuk wilayahnya. Daftar berikut memetakan elemen ke pengumumannya:

Catatan kecil: header dan footer di dalam article atau section tidak diumumkan sebagai banner dan contentinfo — peran besar itu hanya melekat saat elemennya berdiri langsung di bawah body.

main Menggantikan Skip Link #

Teknik lama yang sering kita temui di tutorial: tautan “lompat ke konten” yang ditempatkan di awal markup lalu disembunyikan lewat CSS. Tujuannya baik — melewati menu yang sama diulang di setiap halaman — tetapi kini tidak lagi perlu dipasang sendiri. Elemen main membuat pembaca layar modern menyediakan pintasan “lompat ke konten utama” — chapter main pada Section Semantic HTML sudah membahas aturannya: satu per halaman, membungkus konten yang unik.

Native atau role #

Pertanyaan pada markup lama: <div role="main"> atau <main>? Keduanya diumumkan pembaca layar dengan peran yang sama. Jawabannya tetap main, karena aturan pertama ARIA yang akan kita bedah tuntas pada chapter kapan-menggunakan-aria: jangan memakai ARIA bila HTML native tersedia. Versi native lebih pendek, pasti dibaca semua alat bantu, dan tidak menuntut perawatan tambahan.

Contoh Halaman dengan Landmark #

<header>
  <p>Kedai Kopi Siti</p>
  <nav aria-label="Menu utama">
    <ul>
      <li><a href="/">Beranda</a></li>
      <li><a href="/menu/">Menu</a></li>
    </ul>
  </nav>
</header>
<search>
  <form action="/cari" method="get">
    <label for="kata-kunci">Cari di situs</label>
    <input type="search" id="kata-kunci" name="q">
  </form>
</search>
<main>
  <h1>Menu Seduh</h1>
  <article>
    <h2>V60 Gayo</h2>
    <p>Arabika single origin dari kebun mitra di Gayo, disaring perlahan.</p>
  </article>
  <aside>
    <h2>Promo Minggu Ini</h2>
    <p>Diskon 20% untuk seluruh kopi susu setiap Jumat.</p>
  </aside>
</main>
<footer>
  <p>© 2026 Kedai Kopi Siti — Batu, Jawa Timur.</p>
</footer>

Mari kita bedah wilayah yang terbentuk:

1. Baris 1-9 (header dan nav): kepala halaman — diumumkan sebagai banner; nav di dalamnya menjadi wilayah navigation yang bisa dilompati.
2. Baris 3 (aria-label="Menu utama"): nama pembeda bagi nav — berguna saat halaman memuat lebih dari satu wilayah navigasi.
3. Baris 10-15 (search): wadah semantik pencarian (Baseline sejak Oktober 2023) — diumumkan sebagai wilayah search, satu lompatan langsung ke kotak cari.
4. Baris 12 (label terpasang): label eksplisit for/id — kolom cari punya nama saat difokuskan; detailnya kita bedah pada chapter label dan instruksi form.
5. Baris 16-26 (main): satu-satunya wilayah main — sasaran pintasan “lompat ke konten utama”; article di dalamnya menjadi konten utuh, aside menjadi wilayah complementary.
6. Baris 27-29 (footer): kaki halaman di level teratas — diumumkan sebagai contentinfo.

Demo berikut menyandingkan dua versi halaman mini dengan isi yang persis sama. Kedua kolom tampil nyaris identik — dan memang itulah intinya: perbedaannya tidak dibaca mata, melainkan diumumkan pembaca layar. Elemen header, nav, main, dan footer pada kolom kanan berdiri langsung di bawah body sebagaimana mestinya, sehingga membentuk landmark yang bisa dilompati:

Versi div sama sekali tidak salah secara tampilan — browser merendernya dengan rapi. Yang hilang hanya maknanya: pembaca layar tidak menemukan satu landmark pun untuk dilompati, sehingga pengguna harus menyusuri halaman baris demi baris.

Ringkasan #

• Elemen semantik membentuk landmark yang diumumkan pembaca layar: banner, navigation, main, search, article, complementary, contentinfo.
• main menggantikan skip link buatan sendiri — pintasan “lompat ke konten utama” tersedia otomatis.
• <main> selalu menang atas <div role="main"> — aturan pertama ARIA.
• Landmark secukupnya; beri aria-label bila wilayah sejenis muncul lebih dari satu.

Heading dan landmark sudah membentuk kerangka halaman. Kerangka itu diisi gambar — dan gambar membutuhkan teks penggantinya.