semanticnavaksesibilitasMahir3 mnt baca

Semantic: nav

nav hanya untuk navigasi utama, bukan semua link: navbar aksesibel dengan aria-label dan aria-current.

Masalah: nav di Mana-mana

Buka banyak situs dan kamu akan menemukan nav membungkus setiap kumpulan link: menu utama, link footer, "baca juga", ikon sosial media, semuanya nav. Akibatnya fatal bagi pengguna screen reader: mereka punya shortcut "tampilkan semua landmark navigasi" yang seharusnya menampilkan 1 atau 2 hasil, malah menampilkan 7. Shortcut yang seharusnya menghemat waktu berubah menjadi sampah.

Aturannya tegas: nav hanya untuk blok navigasi utama, kumpulan link yang membawa pengguna berpindah antar bagian penting situs.

Kapan Pakai nav

  • Navigasi utama situs (menu di header). Ini kasus paling umum dan hampir selalu benar.
  • Breadcrumb ("Beranda / Blog / Artikel"), karena ia navigasi hierarki halaman. Beri aria-label="Breadcrumb" agar beda dari nav utama.
  • Daftar isi halaman panjang atau pagination artikel, dengan label yang jelas.

Kuncinya: kalau halaman punya lebih dari satu nav, tiap nav wajib punya aria-label yang membedakan. Screen reader membacakan label itu, bukan urutannya.

Kapan JANGAN Pakai nav

  • Link-link tambahan di footer (kebijakan privasi, syarat, kontak): itu pelengkap, bukan navigasi utama. Cukup footer + ul.
  • "Artikel terkait" atau "baca juga" di dalam article: itu rekomendasi konten, bukan navigasi.
  • Sekumpulan tombol aksi ("Bagikan", "Cetak"): itu aksi, bukan navigasi.
html
<!-- BENAR: footer tanpa nav, linknya pelengkap -->
<footer>
  <ul>
    <li><a href="#">Kebijakan Privasi</a></li>
    <li><a href="#">Syarat Layanan</a></li>
  </ul>
  <p>&copy; 2026 Warkop Kita</p>
</footer>

Contoh Sederhana

html
<nav>
  <ul>
    <li><a href="/">Beranda</a></li>
    <li><a href="/menu">Menu</a></li>
    <li><a href="/tentang">Tentang</a></li>
  </ul>
</nav>

Struktur nav > ul > li > a adalah pola baku. Daftar ul memberi tahu screen reader "ini ada 3 item navigasi", bukan sekadar 3 link lepas.

Contoh Realistis: Navbar Aksesibel

html
<header>
  <h1>Warkop Kita</h1>
  <nav aria-label="Navigasi utama">
    <ul>
      <li><a href="/" aria-current="page">Beranda</a></li>
      <li><a href="/menu">Menu</a></li>
      <li><a href="/galeri">Galeri</a></li>
      <li><a href="/kontak">Kontak</a></li>
    </ul>
  </nav>
  <nav aria-label="Breadcrumb">
    <ol>
      <li><a href="/">Beranda</a></li>
      <li><a href="/menu">Menu</a></li>
      <li aria-current="page">Kopi Tubruk</li>
    </ol>
  </nav>
</header>

Dua detail aksesibilitas di sini. Pertama, aria-label membedakan "Navigasi utama" dari "Breadcrumb" saat screen reader mendaftar landmark. Kedua, aria-current="page" menandai halaman yang sedang aktif, dibacakan sebagai "halaman saat ini". Tanpa ini, pengguna tunanetra tidak tahu mereka sedang di menu yang mana. Breadcrumb memakai ol (ordered list) karena urutan hierarkinya bermakna.

Salah vs Benar

html
<!-- SALAH: semua kumpulan link dibungkus nav -->
<nav><a href="#">Beranda</a> <a href="#">Menu</a></nav>
<article>
  <h2>Judul</h2>
  <nav><a href="#">Artikel terkait 1</a></nav>
</article>
<nav><a href="#">Instagram</a> <a href="#">X</a></nav>

<!-- BENAR: nav hanya untuk navigasi utama -->
<nav aria-label="Navigasi utama">
  <ul>
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Menu</a></li>
  </ul>
</nav>
<article>
  <h2>Judul</h2>
  <p>Baca juga: <a href="#">Artikel terkait 1</a></p>
</article>
<p>Ikuti kami: <a href="#">Instagram</a> <a href="#">X</a></p>
html
<!-- SALAH: dua nav tanpa label, screen reader bingung -->
<nav>...</nav>
<nav>...</nav>

<!-- BENAR: tiap nav berlabel jelas -->
<nav aria-label="Navigasi utama">...</nav>
<nav aria-label="Breadcrumb">...</nav>

Catatan teknis: Tidak ada batas jumlah nav dalam spesifikasi, tapi praktik terbaiknya sedikit mungkin: satu navigasi utama, selebihnya hanya yang benar-benar navigasional dan selalu berlabel. Kalau ragu apakah sekumpulan link layak jadi nav, jawabannya biasanya tidak.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Navbar Aksesibel + Breadcrumb

Buat header berisi: nav aria-label="Navigasi utama" dengan ul berisi 4 link (satu bertanda aria-current="page"), dan nav aria-label="Breadcrumb" berisi ol tiga tingkat (dua link + satu teks aria-current="page"). Tambahkan footer dengan 2 link tanpa nav. Navigasi yang benar membuat pengguna screen reader berpindah halaman secepat pengguna bermata.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Toko</title>
</head>
<body>
  <header>
    <h1>Toko Kita</h1>
    <!-- nav di sini -->
  </header>
</body>
</html>
Open on CodeSandboxOpen Sandbox