Navigasi adalah petunjuk yang memberi tahu pengunjung dua hal: dia sedang di mana, dan bagaimana pergi ke tempat lain. Bayangin papan denah di mal. Ada daftar lantai dan tokonya (navigasi utama), ada titik merah "Anda di sini" (penanda halaman aktif), dan kadang ada jalur dari pintu masuk sampai ke toko yang kamu cari (breadcrumb). Denah yang baik terlihat tanpa dicari, dan titik merahnya cuma satu.
🧪 Tebakan cepat: Situs Homestay Kabut punya empat halaman utama: Beranda, Kamar, Lokasi, Pesanan. Supaya rapi, Bu Sri menyembunyikan keempatnya di balik tombol "Menu" (hamburger) di HP. Apakah tamu tetap memakai navigasinya sesering kalau link-nya terlihat? Jawabannya ada di bagian "Di HP: link terlihat, tab bar, atau hamburger".
Pola-pola navigasi
| Pola | Cocok untuk | Di Homestay Kabut |
|---|---|---|
| Link di atas (top nav) | situs dengan sedikit halaman utama | Beranda, Kamar, Lokasi, Pesanan |
| Tab bar bawah | aplikasi di HP dengan 3 sampai 5 tujuan yang sering dipindah | dasbor Bu Sri: Pesanan, Kalender, Kamar, Akun |
| Sidebar | aplikasi dengan banyak bagian, di layar lebar | dasbor Bu Sri di laptop |
| Hamburger (menu tersembunyi) | link yang gak muat dan jarang dipakai | Kebijakan privasi, Syarat, Tentang Bu Sri |
| Breadcrumb | halaman yang ada di bawah halaman lain | Beranda › Kamar › Kamar Teras |
Pola-pola ini bisa digabung. Situs tamu memakai link di atas, dan halaman kamar menambahkan breadcrumb.
Bungkus dengan nav, tandai halaman aktif
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/">Beranda</a></li>
<li><a href="/kamar" aria-current="page">Kamar</a></li>
<li><a href="/lokasi">Lokasi</a></li>
<li><a href="/pesanan">Pesanan</a></li>
</ul>
</nav>
<style>
nav a { display: block; padding: 12px 10px; color: #475569; text-decoration: none; }
nav a[aria-current="page"] { color: #15803d; font-weight: 700; box-shadow: inset 0 -3px #15803d; }
</style>
<nav>adalah elemen HTML untuk blok navigasi. Pembaca layar (screen reader) mendaftarnya sebagai landmark, titik loncat, jadi penggunanya bisa langsung ke navigasi tanpa membaca seluruh halaman.aria-labelmemberi nama blok itu. Wajib kalau di halaman ada lebih dari satu<nav>, misalnya navigasi utama dan breadcrumb, supaya keduanya bisa dibedakan.aria-current="page"menandai link ke halaman yang sedang dibuka. Pembaca layar mengumumkannya sebagai "current page". Cuma satu link yang boleh membawanya: titik "Anda di sini" cuma satu.- CSS memakai atribut yang sama sebagai selector, jadi tanda yang dilihat mata dan yang didengar pembaca layar gak mungkin beda.
- Tandanya bukan cuma warna. Hijau saja melanggar WCAG 1.4.1 (warna gak boleh jadi satu-satunya pembeda), jadi tambahkan tebal 700 dan garis bawah 3px.
- Tiap link tetap punya
hrefyang mengarah ke halamannya sendiri.
Di latihan nanti, kode awalnya <nav> dengan tiga link: Home, Products, About. Tambahkan aria-label="Main navigation" di <nav>, dan aria-current="page" di link Home saja.
Breadcrumb di halaman kamar
Halaman Kamar Teras ada di bawah halaman Kamar. Breadcrumb menunjukkan jalurnya dan memberi jalan naik satu tingkat:
<nav aria-label="Breadcrumb" class="crumbs">
<ol>
<li><a href="/">Beranda</a></li>
<li><a href="/kamar">Kamar</a></li>
<li><a href="/kamar/teras" aria-current="page">Kamar Teras</a></li>
</ol>
</nav>
<style>
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }
.crumbs a { display: inline-block; padding: 4px 0; }
.crumbs li + li::before {
content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 6px;
border-top: 2px solid #475569; border-right: 2px solid #475569; transform: rotate(45deg);
}
</style>
<ol>karena urutannya punya arti: dari atas ke bawah.- Halaman terakhir adalah halaman ini, jadi dia yang membawa
aria-current="page". Di navigasi utama, link Kamar boleh ditandaiaria-current="true"(bagian yang sedang dibuka), supaya tetap cuma satu yang bilang "page". - Tanda panahnya digambar dengan garis border yang diputar, dengan
content: "". Kalau ditulis sebagai karakter›, sebagian pembaca layar ikut membacakannya di antara tiap link. padding: 4px 0membuat tinggi link 29px, di atas batas 24px WCAG 2.5.8.
Di HP: link terlihat, tab bar, atau hamburger
Kami mengukur halaman Bu Sri di lebar 375px, di Chromium, WebKit, dan Firefox. Hasilnya sama di ketiganya:
| Pola | Link terlihat tanpa diketuk | Kotak link terkecil |
|---|---|---|
| Link di atas, di baris sendiri di bawah nama situs | 4 dari 4, muat satu baris | 65,9 × 48px |
| Tab bar bawah, ikon dan label | 4 dari 4 | 93,8 × 56px |
| Hamburger tertutup | 0 dari 4 | tombol Menu 68 × 48px |
Batas ukuran target sentuh dari pelajaran density: WCAG 2.5.8 minimal 24 × 24px, Apple 44 × 44pt, Material 48 × 48dp. Ketiga pola lolos. Bedanya ada di yang terlihat.
Nielsen Norman Group menguji ini di 2016 dengan 179 peserta dan 6 situs. Di HP, navigasi yang tersembunyi dipakai di 57% kasus, sedangkan navigasi yang sebagian terlihat dipakai di 86%, dan tugasnya 15% lebih lambat kalau navigasinya tersembunyi. Di desktop jaraknya lebih jauh: 27% lawan 48 sampai 50%. Jadi jawaban tebakannya: enggak. Yang gak terlihat lebih jarang dipakai. Itu jawaban tebakannya.
Pilihan untuk Bu Sri:
- Situs tamu: empat link pendek muat satu baris, jadi tampilkan saja di atas.
- Dasbor Bu Sri di HP: tab bar bawah. Material menyarankan tab bar untuk 3 sampai 5 tujuan setingkat, masing-masing dengan ikon dan label.
- Hamburger: untuk link yang memang gak muat dan jarang dicari. Kalau dipakai, buat dari
<button aria-expanded="false" aria-controls="menu">Menu</button>, tulis "Menu" sebagai teksnya, dan tetap tampilkan tujuan terpenting di luar menu.
⚠️ Jebakan yang sering ketemu
aria-current="page"di dua link. Nav disalin dari halaman lain dan penandanya ikut terbawa, jadi pembaca layar bilang dua halaman sedang dibuka. Latihan menolak ini.- Halaman aktif cuma beda warna. Pengguna buta warna gak melihatnya. Tambahkan tebal atau garis bawah.
- Hamburger untuk empat link. Linknya muat, tapi disembunyikan. Tampilkan.
- Link tanpa
href, atau<div>yang diklik. Gak bisa dicapai dengan Tab, dan bukan link bagi pembaca layar. Tiap link butuhhrefyang terisi. - Dua
<nav>tanpa nama. Pembaca layar mendaftar dua "navigation" yang gak bisa dibedakan. Beriaria-label.
TL;DR: Navigasi menjawab "aku di mana" dan "ke mana lagi". Bungkus dengan <nav aria-label="..."> (nama wajib kalau <nav>-nya lebih dari satu), dan tandai link halaman yang sedang dibuka dengan aria-current="page", cuma di satu link, lalu tebalkan lewat selector atribut yang sama, bukan cuma warna. Pilih polanya dari jumlah dan pentingnya tujuan: link di atas untuk situs dengan sedikit halaman, tab bar bawah untuk 3 sampai 5 tujuan aplikasi di HP, sidebar untuk aplikasi besar di layar lebar, breadcrumb (<ol> di dalam <nav aria-label="Breadcrumb">) untuk halaman bertingkat, dan hamburger cuma untuk yang gak muat dan jarang dipakai. Studi NN/g: di HP, navigasi tersembunyi dipakai 57% kasus, yang sebagian terlihat 86%.
