Seperti yang Anda pelajari dalam link, elemen <a> dengan atribut href membuat link yang dapat diikuti pengguna dengan mengklik atau
mengetuk. Di daftar, Anda telah mempelajari cara membuat daftar konten. Di bagian ini, Anda akan menemukan cara mengelompokkan daftar link untuk membuat navigasi.
Ada beberapa jenis navigasi dan beberapa cara untuk menampilkannya. Anchor bernama dalam teks yang tertaut ke halaman lain dalam situs yang sama dianggap sebagai navigasi lokal. Navigasi lokal yang terdiri dari serangkaian link yang menampilkan hierarki halaman saat ini dalam kaitannya dengan struktur situs, atau halaman yang diikuti pengguna untuk membuka halaman saat ini, disebut breadcrumb. Daftar isi halaman adalah jenis navigasi lokal lain. Halaman yang berisi link hierarki ke setiap halaman di sebuah situs disebut peta situs. Bagian navigasi yang mengarah ke halaman tingkat atas dari {i>website<i} yang ditemukan di setiap halaman disebut navigasi global. Navigasi global dapat ditampilkan dengan beberapa cara yang berbeda, termasuk bilah navigasi, menu {i>drop-down<i}, dan menu {i>flyout<i}. Situs yang sama dapat menampilkan navigasi globalnya secara berbeda, bergantung pada ukuran area pandang.
Selalu pastikan pengguna dapat membuka halaman mana pun di situs Anda dengan jumlah klik paling sedikit, sekaligus pastikan navigasinya intuitif dan tidak berlebihan. Meskipun demikian, tidak ada persyaratan khusus untuk elemen navigasi. MachineLearningWorkshop.com, merupakan situs web satu halaman, memiliki menu navigasi lokal di kanan atas; di sinilah situs multi-halaman sering kali menempatkan navigasi globalnya.
Jika Anda melihat halaman ini di web.dev, Anda dapat menemukan beberapa fitur navigasi. Ada breadcrumb di atas judul, daftar isi "di halaman ini" setelah judul, dan daftar isi "Learn HTML" yang, bergantung pada lebar layar, selalu ditampilkan atau dibuat terlihat dengan mengklik tombol menu. Elemen pertama pada halaman adalah link tersembunyi ke #main, yang memungkinkan Anda melewati sidebar dan link breadcrumb.
Link "Lewati ke konten"
Elemen pertama pada halaman adalah link internal:
<a href="#main" class="skip-link button">Skip to main</a>
yang, saat diklik, atau saat difokuskan dan pengguna menekan Enter, akan men-scroll halaman dan memberikan fokus ke konten utama:
<main> penanda dengan id main:
<main id="main">
Anda mungkin tidak akan pernah melihat link tersebut di situs ini, meskipun Anda telah membaca semua bagian sebelumnya. Iklan hanya ditampilkan saat memiliki fokus:
Untuk meningkatkan kegunaan dan aksesibilitas, sebaiknya biarkan pengguna melewati blok konten yang berulang di setiap halaman.
Link lewati disertakan sehingga saat pengguna keyboard menekan tab saat dimuat, pengguna dapat langsung melompat ke konten utama situs, sehingga tidak perlu membuka tab melalui penautan yang ekstensif. Di halaman ini, link lewati melewati navigasi sidebar seluruh bagian dan navigasi breadcrumb, sehingga pengguna langsung diarahkan ke judul halaman.
Sebagian besar desainer tidak menyukai tampilan memiliki tautan di bagian atas laman. Anda dapat menyembunyikan link dari tampilan sambil mengingat
bahwa saat link mendapatkan fokus, yang akan terjadi saat pengguna keyboard melakukan tab melalui link pada halaman, link tersebut harus terlihat oleh semua pengguna.
Hanya sembunyikan konten dalam status tidak fokus dan tidak aktif menggunakan pemilih yang mirip dengan .visually-hidden:not(:focus):not(:active).
Teks tautan berbunyi "lewati ke utama". Ini adalah nama link yang dapat diakses. Ini adalah situs teknis, dan pengguna mungkin mengetahui arti "utama".
Seperti semua teks tautan, nama aksesibilitas harus menunjukkan dengan jelas ke mana tautan tersebut akan membawa pengguna. Target link harus menjadi awal dari konten utama halaman. Untuk mengujinya, saat halaman dimuat, tekan tab ke link "Lewati ke utama". Lalu, tekan Enter untuk memastikan "melompat" ke konten utama.
Daftar isi
Link lewati ke konten men-scroll konten utama ke dalam tampilan. Elemen pertama adalah judul <h1> dengan judul bagian ini.
Dalam hal ini, <h1>Marking up navigation</h1>. Judul utama diikuti dengan tagline, deskripsi singkat tentang konten
tutorial ini. Navigasi daftar isi muncul sebelum atau setelah judul di codebase bergantung pada lebar browser Anda.
Jika browser Anda lebih lebar dari 80em, Daftar isi akan ditampilkan sebelum judul di markup, dan mirip dengan berikut ini (nama class telah dihapus untuk menyederhanakan markup):
<nav aria-label="On this page">
<div>On this page</div>
<div>
<ul>
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</div>
</nav>
<nav> adalah elemen terbaik yang digunakan untuk bagian navigasi: elemen ini otomatis memberi tahu pembaca layar dan mesin telusur
bahwa bagian memiliki peran navigation, yaitu peran penanda.
Menyertakan atribut aria-label
akan memberikan deskripsi singkat tentang tujuan navigasi. Dalam hal ini, karena nilai atribut berlebihan untuk
teks yang terlihat di halaman, sebaiknya gunakan aria-labelledby
untuk mereferensikan teks yang terlihat.
Kita dapat mengubah <div> non-semantik menjadi paragraf <p>, lalu menambahkan id agar dapat direferensikan. Kemudian, kita menggunakan aria-labelledby:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
Selain mengurangi redundansi, teks yang terlihat juga diterjemahkan oleh layanan terjemahan, sedangkan nilai atribut mungkin tidak diterjemahkan. Bila memungkinkan, jika ada teks yang menyediakan label memadai, pilih itu daripada teks atribut.
Navigasi ini adalah daftar isi. Jika Anda ingin menggunakan aria-label, berikan informasi tersebut daripada mengulangi teks yang terlihat:
<nav aria-label="Table of Contents">
<p>On this page</p>
Saat memberikan nama yang dapat diakses pada elemen, jangan sertakan nama elemen tersebut. Pembaca layar memberikan informasi tersebut kepada pengguna.
Misalnya, saat menggunakan elemen <nav>, jangan sertakan "navigasi"; informasi tersebut disertakan saat menggunakan elemen semantik.
Tautan itu sendiri berada dalam daftar yang tidak berurutan. Meskipun tidak harus disusun bertingkat dalam daftar, penggunaan daftar memungkinkan pengguna pembaca layar mengetahui jumlah item daftar, sehingga link, yang merupakan daftar individual dalam navigasi.
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
<ul role="list">
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</nav>
Jika lebar browser Anda kurang dari 80em, widget "Di halaman ini" berada di bawah judul dan tagline. Hal ini dilakukan dengan menyertakan
dua komponen navigasi tabel konten dan menyembunyikan salah satunya dengan display: none; CSS berdasarkan kueri media.
Menyertakan dua widget yang identik untuk hanya menampilkan satu widget adalah antipola. Byte tambahan dapat diabaikan. Menyembunyikan konten HTML dari
semua pengguna dengan menggunakan CSS display: none merupakan hal yang tepat. Masalahnya adalah, pada layar lebar, daftar isi ditempatkan sebelum #main;
dan pada layar yang lebih sempit, daftar isi disusun bertingkat dalam #main. Penggunaan keyboard untuk melewati ke konten akan melewati tabel
konten pada layar lebar. Meskipun pengguna sudah terbiasa dengan konten yang responsif dan berubah-ubah lokasi saat mereka berganti perangkat atau
memperbesar ukuran font, mereka tidak mengharapkan urutan tab berubah saat mereka melakukannya. Tata letak halaman harus dapat diakses, dapat diprediksi,
dan konsisten di seluruh situs. Di sini, lokasi daftar isi tidak dapat diprediksi.
Breadcrumb halaman
Breadcrumb menyediakan navigasi sekunder untuk membantu pengguna memahami posisi mereka di {i>website<i}. Umumnya, elemen ini menunjukkan hierarki URL dokumen saat ini dan lokasi halaman saat ini dalam struktur situs. Struktur situs dari perspektif pengguna mungkin berbeda dengan struktur file di server. Tidak apa-apa. Pengguna tidak perlu mengetahui cara Anda mengatur file, tetapi mereka harus dapat menjelajahi konten Anda.
Breadcrumb membantu pengguna menjelajahi dan memahami organisasi situs Anda, sehingga mereka dapat menavigasi ke mana saja dengan cepat hingga ke bagian ancestor tanpa harus menelusuri kembali setiap halaman sebelumnya yang dikunjungi untuk membuka halaman saat ini menggunakan fungsi back.
Jika situs memiliki struktur direktori hierarki yang sederhana, seperti halnya web.dev, navigasi breadcrumb akan sering terdiri dari link ke beranda, atau nama host, dengan link ke file indeks dari setiap direktori di nama jalur URL. Penyertaan halaman saat ini bersifat opsional dan memerlukan sedikit perhatian tambahan.
const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"
Bagian dari breadcrumb menunjukkan jalur dari halaman saat ini kembali ke halaman beranda, yang menampilkan setiap tingkat di antaranya.
Setiap halaman modul Belajar HTML memiliki navigasi breadcrumb yang sama, yang menampilkan hierarki pelajaran HTML dalam
bagian learn dari web.dev. Kode ini mirip dengan berikut ini, dengan menghapus class dan detail SVG agar lebih jelas:
<nav aria-label="breadcrumbs">
<ul role="list">
<li>
<a href="/">
<svg aria-label="web.dev" role="img">
<use href="#webDevLogo" />
</svg>
</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
</ul>
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
</nav>
Breadcrumb ini mengikuti praktik terbaik. Fungsi ini menggunakan elemen <nav>, yang merupakan peran penting, sehingga teknologi pendukung menampilkan breadcrumb sebagai elemen navigasi di halaman.
Nama yang dapat diakses dari "breadcrumb", yang disediakan dengan aria-label, membedakannya dari penanda navigasi lain di dokumen saat ini.
Di antara link, terdapat pemisah konten buatan CSS. Pemisah ditempatkan sebelum setiap item daftar yang dimulai dengan <li> kedua.
[aria-label^="breadcrumb" i] li + li::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
rotate: 45deg;
opacity: .8
}
Pembaca layar tidak akan "melihatnya", dan merupakan praktik terbaik: pemisah di antara link breadcrumb harus disembunyikan dari pembaca layar. Teks tersebut juga harus memiliki kontras yang cukup dengan latar belakangnya, sama seperti teks biasa.
Versi ini menggunakan daftar yang tidak diurutkan dan item daftar. Daftar yang diurutkan lebih disarankan karena item daftar yang diurutkan dienumerasi.
Selain itu, daftarnya: role="list" ditambahkan kembali karena beberapa nilai properti tampilan CSS menghapus semantik dari beberapa elemen.
Umumnya, link ke halaman beranda di breadcrumb harus terbaca "home", bukan logo situs dengan nama situs sebagai label. Namun, karena breadcrumb berada di bagian atas dokumen dan merupakan satu-satunya kemunculan logo di halaman, anti-pola ini dapat digunakan.
Elemen terakhir adalah elemen <share-action> kustom. Elemen kustom dibahas di bagian 15. Meskipun elemen kustom ini
bukan bagian dari breadcrumb, menyertakan elemen yang tidak terkait dalam <nav> tidak masalah, selama penyertaannya konsisten di semua halaman.
Halaman ini
Di halaman ini, halaman saat ini, "Navigation", tidak disertakan dalam breadcrumb. Jika halaman saat ini disertakan dalam
breadcrumb, sebaiknya teks bukan berupa link, dan aria-current="page" harus disertakan di item daftar
halaman saat ini. Jika tidak disertakan, sebaiknya tunjukkan bahwa judul yang mengikutinya adalah halaman saat ini dengan
ikon atau simbol lainnya.
Jika desain berubah, versi alternatif breadcrumb dapat digunakan:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
<li aria-current="page">
Navigation
</li>
</ol>
</nav>
Breadcrumb bukan untuk langkah linear. Misalnya, daftar jalur yang diikuti pengguna untuk sampai ke halaman saat ini atau
daftar langkah yang ditindaklanjuti sampai tahap ini dalam resep dapat disusun bertingkat dalam <nav>, tetapi tidak boleh diberi label sebagai breadcrumb.
Navigasi lokal
Terdapat komponen navigasi lain di halaman ini. Jika Anda menggunakan layar yang lebar, ada sidebar di sebelah kiri dengan logo "Learn HTML", kotak penelusuran, dan link ke masing-masing dari 20 bagian dalam Belajar HTML. Setiap link berisi nomor bab, judul bagian, dan tanda centang di sebelah kanan pada bagian yang telah Anda kunjungi—mungkin link ini jika Anda telah keluar dan kembali. Tautan ke semua bagian dalam Pelajari HTML, bersama dengan judul penelusuran dan lokal, adalah navigasi lokasi.
Jika Anda mengunjungi situs ini di tablet atau perangkat seluler, atau memiliki layar yang lebih sempit, saat Anda memuat halaman ini, sidebar akan disembunyikan. Anda dapat membuatnya terlihat melalui menu tiga garis di menu navigasi atas (ya, header adalah elemen <web-header> kustom dengan kumpulan role="navigation").
Perbedaan utama antara navigasi lokal permanen di layar lebar dan navigasi lokal di layar yang lebih sempit yang dapat dibuat muncul dan menghilang, adalah tampilan tombol tutup pada versi yang dapat disembunyikan. Ikon ini disembunyikan pada layar lebar dengan display: none;.
Link ke dokumen ini, bagian 010, memiliki tampilan yang sedikit berbeda dari link lain di navigasi lokal untuk menunjukkan kepada pengguna yang telah melihat bahwa halaman ini adalah halaman saat ini. Perbedaan visual ini dibuat dengan CSS. Halaman saat ini juga diidentifikasi dengan atribut aria-current="page". Hal ini menginformasikan teknologi pendukung bahwa tautan tersebut merupakan tautan ke halaman saat ini. HTML untuk item daftar ini dalam navigasi lokal ini mirip dengan:
<li>
<a aria-current="page" href="/learn/html/navigation" data-complete="true">
<span>010</span>
<span>Navigation</span>
<svg aria-label="Check" role="img">
<use href="#checkmark" />
</svg>
</a>
</li>
Jika ini bukan pertama kalinya Anda mengunjungi halaman ini, tanda centang tidak akan terlihat. Jika Anda pernah mengunjungi halaman ini, atribut khusus data-complete ditetapkan ke true, dan tanda centang akan ditampilkan. Tanda centang disertakan
di setiap link, tetapi CSS menyembunyikan kotak centang dari pengguna yang belum pernah ke halaman ini sebelumnya dengan display: none berdasarkan tidak adanya
atribut dan nilai data-complete="true":
.course .stack-nav a:not([data-complete="true"]) svg {
display: none;
}
Jika display disetel ke selain none, role akan memberi tahu teknologi pendukung bahwa SVG inline adalah gambar,
dan aria-label bertindak sebagai atribut alt pada <img>.
Navigasi global
Navigasi global adalah bagian navigasi yang mengarah ke laman tingkat atas dari {i>website<i} yang sama di setiap halaman situs.
Navigasi global situs juga dapat terdiri dari tab yang membuka daftar link bertingkat yang tertaut ke semua subbagian situs atau menu lainnya.
Fitur ini dapat menyertakan bagian berjudul, tombol, dan widget penelusuran. Fitur tambahan ini bukan persyaratan. Yang diperlukan adalah
navigasi muncul di setiap halaman, dan sama di setiap halaman; tentu saja dengan aria-current="page" di link mana pun ke halaman saat ini.
Navigasi global menyediakan sarana yang konsisten untuk bepergian ke mana saja dalam aplikasi atau situs web. Google tidak memiliki navigasi global di bagian atas laman. Yahoo! yang melakukannya. Meskipun semua properti utama Yahoo! memiliki gaya yang berbeda, sebagian besar konten di sebagian besar bagian sama.
Konten header navigasi global berita dan olahraga sama, tetapi ikon yang menunjukkan bahwa pengguna saat ini berolahraga tidak memiliki cukup kontras untuk dapat diakses; bahkan bagi pengunjung yang memiliki gangguan penglihatan. Kedua bagian memiliki navigasi global dengan navigasi lokal khusus bagian di bawahnya.
Mirip dengan navigasi global, footer harus sama di semua halaman. Tapi itulah satu-satunya kesamaan. Navigasi global memungkinkan navigasi ke semua bagian situs dari perspektif produk. Elemen navigasi dalam {i>footer<i} tidak memiliki persyaratan khusus. Umumnya, footer akan mencantumkan link perusahaan, seperti pernyataan hukum, tentang perusahaan, dan karier, serta dapat mengarah ke sumber eksternal, seperti ikon media sosial.
Footer halaman ini berisi tiga elemen <nav> tambahan: navigasi footer, Google Developers, serta persyaratan dan kebijakan,
dengan masing-masing berupa link. Navigasi footer mencakup cara berkontribusi ke web.dev di GitHub, konten edukasi lainnya yang disediakan oleh
Google di luar web.dev, dan link "cara terhubung" eksternal.
Ketiga navigasi di <footer> ini adalah elemen <nav> dengan aria-labelyang memberikan nama yang dapat diakses untuk peran penting ini.
Semua navigasi yang kita lihat merupakan link yang disarangkan di daftar dalam navigasi. Kami telah membahas semua yang perlu Anda ketahui untuk membuat navigasi Anda sendiri.
Selanjutnya, kita akan membahas cara memberi markup pada tabel data.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang navigasi.
Elemen mana yang digunakan untuk menandai navigasi utama sebuah situs?
<navigation><breadcrumb><nav>Apakah boleh terdapat beberapa elemen navigasi di satu halaman?