Seperti yang Anda pelajari dalam link, elemen <a> dengan atribut href membuat link yang dapat diikuti pengguna dengan mengklik atau
mengetuk. Dalam daftar, Anda telah mempelajari cara membuat daftar konten. Pada bagian ini, Anda akan menemukan
cara mengelompokkan daftar
tautan bersama untuk
membuat navigasi.
Ada beberapa jenis navigasi dan beberapa cara untuk menampilkannya. Anchor bernama dalam teks yang terhubung ke halaman lain di dalamnya situs web yang sama dianggap sebagai navigasi lokal. Navigasi lokal yang terdiri dari serangkaian tautan yang menampilkan hierarki halaman saat ini dalam kaitannya dengan struktur situs, atau halaman yang diikuti pengguna untuk sampai ke halaman saat ini, disebut {i>breadcrumb<i}. Daftar isi halaman adalah jenis navigasi lokal lainnya. Halaman yang berisi link hierarkis 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, termasuk menu navigasi, menu drop-down, dan menu {i>flyout<i}. Situs yang sama dapat menampilkan navigasi globalnya secara berbeda, bergantung pada ukuran area pandang.
Selalu pastikan pengguna dapat menavigasi ke laman mana pun di situs Anda dengan jumlah klik paling sedikit, sambil memastikan navigasi intuitif dan tidak melelahkan. Meskipun demikian, tidak ada persyaratan khusus untuk elemen navigasi. MachineLearningWorkshop.com, menjadi {i>website<i} satu halaman, memiliki bilah 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, "di halaman ini" daftar isi setelah judul, dan "Pelajari HTML" daftar isi yang, tergantung pada lebar layar, akan selalu ditampilkan atau terlihat dengan mengeklik tombol menu. Elemen pertama di halaman ini adalah link tersembunyi ke #main, yang memungkinkan Anda melewati link sidebar dan breadcrumb.
"Langsung ke konten" tautan
Elemen pertama pada halaman adalah link internal:
<a href="#main" class="skip-link button">Skip to main</a>
yang, saat diklik, atau saat iklan memiliki fokus dan pengguna mengklik Enter, men-scroll halaman dan memberikan fokus ke konten utama:
tempat terkenal <main> dengan id main:
<main id="main">
Anda mungkin belum pernah melihat link di situs ini, meskipun Anda telah membaca semua bagian sebelumnya. Elemen ini hanya ditampilkan saat memiliki fokus:
Untuk peningkatan kegunaan dan aksesibilitas, penting untuk memungkinkan pengguna mengabaikan blok konten yang diulang di setiap halaman.
Link lewati disertakan sehingga ketika pengguna keyboard menekan tab saat dimuat, mereka dapat dengan cepat melewati ke konten utama situs—menghindari
harus menelusuri tautan yang ekstensif. Pada halaman ini, link lewati akan melewati navigasi sidebar seluruh bagian dan navigasi breadcrumb,
mengarahkan pengguna langsung
ke judul halaman.
Sebagian besar desainer tidak menyukai tampilan tautan di bagian atas laman. Sembunyikan link dari tampilan sambil mengingat
bahwa ketika link menjadi fokus, yang akan terjadi saat pengguna keyboard membuka link di halaman tersebut, link tersebut harus terlihat oleh semua pengguna.
Hanya sembunyikan konten dalam status tidak difokuskan dan nonaktif menggunakan pemilih yang mirip dengan .visually-hidden:not(:focus):not(:active).
Teks tautan bertuliskan
"lewati ke utama". Ini adalah nama link yang dapat diakses. Ini adalah situs teknis, dan pengguna mungkin mengetahui apa yang "utama" maksudnya.
Seperti semua teks link, nama yang mudah diakses harus menunjukkan dengan jelas ke mana link tersebut akan membawa pengguna. Target link harus merupakan awal
konten utama halaman. Untuk mengujinya, saat halaman dimuat, tekan Tab ke "Lewati ke utama" tautan. Lalu, tekan Enter untuk memastikannya "melompat" ke konten utama.
Daftar isi
Link lewati ke konten men-scroll konten utama ke tampilan. Elemen pertama adalah heading <h1> dengan judul bagian ini.
Dalam kasus ini, <h1>Marking up navigation</h1>. Judul utama diikuti oleh {i>tagline<i}, deskripsi singkat tentang
tutorial. Apakah navigasi daftar isi ditempatkan sebelum atau setelah judul di codebase bergantung pada lebar browser Anda.
Jika browser Anda lebih lebar dari 80em, Daftar Isi muncul sebelum judul pada markup, dan serupa dengan yang 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> merupakan elemen terbaik untuk digunakan pada bagian navigasi: elemen ini otomatis memberi tahu pembaca layar dan mesin telusur
bahwa suatu bagian memiliki peran navigation, peran penanda.
Menyertakan atribut aria-label
memberikan deskripsi singkat
tentang tujuan navigasi. Dalam hal ini, karena nilai atribut redundan untuk
teks yang terlihat di halaman, sebaiknya gunakan aria-labelledby
sebagai referensi 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 akan diterjemahkan oleh layanan terjemahan, sedangkan nilai atribut mungkin tidak. Jika memungkinkan, jika ada teks yang menyediakan label yang memadai, pilih itu daripada teks atribut.
Navigasi ini adalah daftar isi. Jika Anda ingin menggunakan aria-label, berikan informasi tersebut, bukan 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. Pembaca layar menyediakan informasi itu kepada pengguna.
Misalnya, saat menggunakan elemen <nav>, jangan sertakan "navigasi"; informasi tersebut disertakan saat
menggunakan elemen semantik.
Link itu sendiri berada dalam daftar yang tidak diurutkan. Meskipun tidak harus disarangkan dalam daftar, penggunaan daftar memungkinkan pengguna pembaca layar untuk mengetahui berapa banyak item daftar, dan juga tautan, adalah 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, label "Di halaman ini" di bawah judul dan tagline. Hal ini dilakukan dengan menyertakan
dua komponen navigasi tabel isi dan menyembunyikan salah satunya dengan CSS display: none; berdasarkan kueri media.
Menyertakan dua widget yang identik sehingga hanya menampilkan satu widget adalah anti-pola. Byte ekstra dapat diabaikan. Menyembunyikan konten HTML dari
semua pengguna dengan menggunakan CSS display: none sudah sesuai. Masalahnya, di layar lebar, daftar isi ditempatkan sebelum #main;
dan pada layar yang lebih sempit, daftar isi ditempatkan di dalam #main. Menggunakan {i>keyboard<i} untuk langsung menuju ke konten akan melewati tabel
konten pada layar yang lebar. Sementara pengguna terbiasa dengan konten responsif dan mengubah lokasi saat mereka berganti perangkat atau
memperbesar ukuran {i>font<i}, mereka tidak mengharapkan urutan tab berubah ketika mereka melakukannya. Tata letak laman 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 sebuah {i>website<i}. Biasanya menunjukkan hierarki URL dari dokumen dan lokasi halaman saat ini dalam struktur situs. Struktur situs dari perspektif pengguna mungkin berbeda dari struktur file di server. Tidak apa-apa. Pengguna tidak perlu tahu bagaimana Anda mengatur {i>file<i} Anda, tetapi mereka harus bisa untuk menavigasi konten Anda.
Breadcrumb membantu pengguna menavigasi dan memahami organisasi situs Anda, sehingga mereka dapat dengan cepat menuju ke ancestor mana pun
bagian tanpa harus menelusuri setiap halaman sebelumnya yang dikunjungi untuk sampai ke halaman saat ini menggunakan fungsi back.
Jika situs memiliki struktur direktori hierarkis yang sederhana, seperti halnya web.dev, navigasi breadcrumb akan sering terdiri tautan ke beranda, atau nama {i>host<i}, dengan tautan ke file indeks setiap direktori di nama jalur URL. Penyertaan pada 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 breadcrumb menampilkan jalur dari halaman saat ini kembali ke halaman beranda, yang menampilkan setiap level di antaranya.
Setiap halaman modul Pelajari HTML memiliki navigasi breadcrumb yang sama, yang menampilkan hierarki pelajaran HTML dalam
learn bagian dari web.dev. Kode ini mirip dengan berikut, dengan detail class dan SVG dihapus 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. breadcrumb menggunakan elemen <nav>, yang merupakan peran penting, sehingga teknologi pendukung menampilkan breadcrumb sebagai elemen navigasi di halaman.
Nama yang dapat diakses dari "breadcrumb", yang disertakan dengan aria-label, membedakannya dari penanda navigasi lain dalam dokumen saat ini.
Di antara link terdapat pemisah konten buatan CSS. Pemisah berada 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 "melihat" mereka, yang merupakan praktik terbaik: pemisah di antara link breadcrumb harus disembunyikan dari pembaca layar. Teks tersebut juga harus memiliki kontras yang cukup terhadap latar belakangnya, sama seperti teks biasa.
Versi ini menggunakan daftar dan item daftar yang tidak diurutkan. Daftar yang diurutkan lebih disukai karena item daftar yang diurutkan disebutkan.
Ini juga merupakan daftar: role="list" ditambahkan kembali karena beberapa nilai properti tampilan CSS menghapus semantik dari beberapa elemen.
Umumnya, link ke halaman beranda di breadcrumb seharusnya terbaca "home" bukan logo situs dengan nama situs seperti pada label. Namun, karena {i>breadcrumb <i}berada di bagian atas dokumen dan merupakan satu-satunya logo di laman, itu masuk akal tentang mengapa anti-pola ini digunakan.
Elemen terakhir adalah elemen <share-action> kustom. Elemen kustom dibahas di bagian 15. Meskipun elemen kustom ini
bukan bagian dari breadcrumb, termasuk elemen yang tidak terkait di <nav> tidak masalah, selama penyertaan konsisten di semua halaman.
Halaman saat ini
Di halaman ini, halaman saat ini, "Navigation", tidak disertakan dalam breadcrumb. Ketika halaman saat ini disertakan dalam
breadcrumb, teks sebaiknya bukan link, dan aria-current="page" harus disertakan pada bagian
item daftar. 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 laman saat ini atau
daftar langkah yang diikuti hingga titik ini dalam resep dapat disarangkan dalam <nav>, tetapi tidak boleh diberi label sebagai breadcrumb.
Navigasi lokal
Ada komponen navigasi lain di halaman ini. Jika Anda menggunakan layar yang lebar, ada bilah sisi di sebelah kiri dengan "Pelajari HTML" logo, kotak penelusuran, dan link ke masing-masing dari 20 bagian dalam Pelajari HTML. Setiap tautan berisi nomor bab, judul bagian, dan tanda centang di sebelah kanan pada bagian yang telah Anda kunjungi—mungkin tanda centang ini jika Anda telah keluar dan kembali. Link ke semua bagian di Learn HTML, bersama dengan header lokal dan penelusuran, 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, headernya adalah elemen <web-header> kustom dengan set role="navigation").
Perbedaan utama antara navigasi lokal permanen di layar lebar dan navigasi lokal pada layar yang lebih sempit yang dapat dibuat agar muncul dan menghilang adalah tampilan tombol tutup pada versi yang dapat disembunyikan. Ikon ini disembunyikan di layar lebar dengan display: none;.
Tautan ke dokumen ini, bagian 010, memiliki tampilan yang sedikit berbeda dari tautan lain dalam navigasi lokal untuk menunjukkan kepada pengguna yang mampu melihat bahwa ini adalah halaman saat ini. Perbedaan visual ini dibuat dengan CSS. Halaman saat ini juga diidentifikasi dengan atribut aria-current="page". Elemen ini memberi tahu teknologi pendukung bahwa halaman tersebut adalah link 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 sebelumnya,
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 ketiadaan
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 berfungsi seperti yang dilakukan atribut alt pada <img>.
Navigasi global
Navigasi global adalah bagian navigasi yang mengarah ke halaman tingkat atas situs 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.
Widget ini dapat meliputi bagian, tombol, dan widget penelusuran yang berjudul. Fitur tambahan ini tidak bersifat wajib. Yang diperlukan adalah
navigasi muncul di setiap halaman, dan akan sama di setiap halaman; dengan aria-current="page" di setiap link ke halaman saat ini, tentu saja.
Navigasi global memberikan sarana yang konsisten untuk bepergian ke mana saja dalam aplikasi atau situs. Google tidak memiliki navigasi di bagian atas halaman. Grup iklan Yahoo! fungsi tersebut. Meskipun semua fitur Yahoo! properti memiliki gaya yang berbeda, isi untuk sebagian besar bagiannya sama.
Konten header navigasi global berita dan olahraga sama, tetapi ikon yang menunjukkan bahwa pengguna saat ini pada olahraga tidak cukup kontras untuk dapat diakses; bahkan bagi pengunjung yang memiliki gangguan penglihatan. Kedua bagian memiliki 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 footer tidak memiliki persyaratan khusus. Umumnya, {i>footer<i} akan menyertakan tautan perusahaan, seperti pernyataan hukum, tentang perusahaan, dan karier, dan dapat mengarah ke informasi eksternal berbagai sumber, seperti ikon media sosial.
Footer halaman ini berisi tiga elemen <nav> tambahan: navigasi footer, Google Developers, serta persyaratan dan kebijakan,
dengan masing-masing
berupa tautan. Navigasi {i>footer<i} menyertakan cara berkontribusi ke web.dev di GitHub, konten pendidikan lain yang disediakan oleh
Google di luar web.dev, dan "cara menghubungkannya" eksternal penautan.
Tiga navigasi dalam <footer> ini adalah elemen <nav> dengan aria-label yang memberikan nama yang dapat diakses untuk peran tempat terkenal ini.
Semua navigasi yang telah kita lihat merupakan link yang disusun bertingkat di daftar dalam navigasi. Kita telah membahas semua yang perlu Anda ketahui untuk membuat navigasi Anda sendiri.
Selanjutnya, kita akan membahas penandaan tabel data.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang navigasi.
Elemen mana yang digunakan untuk menandai navigasi utama situs?
<navigation><breadcrumb><nav>Satu halaman dapat berisi beberapa elemen navigasi?