Membangun navigasi utama untuk {i>website

Tutorial ini menjelaskan cara membuat navigasi utama situs yang mudah diakses. Anda akan mempelajari HTML semantik, aksesibilitas, dan bagaimana penggunaan atribut ARIA terkadang dapat menimbulkan lebih banyak kerugian daripada manfaat.

Manuel Matuzović

Ada banyak cara untuk membuat navigasi utama situs, dalam hal gaya, fungsi, serta markup dan informasi semantik yang mendasarinya. Jika implementasinya terlalu minimalis, implementasi tersebut akan berfungsi untuk sebagian besar pengguna, tetapi pengalaman pengguna (UX) mungkin tidak terlalu baik. Jika terlalu rumit, pengguna mungkin akan bingung atau bahkan tidak dapat mengaksesnya sama sekali.

Untuk sebagian besar situs, Anda perlu membuat sesuatu yang tidak terlalu sederhana, tetapi juga tidak terlalu rumit.

Membangun lapisan demi lapisan

Dalam tutorial ini, Anda akan memulai dengan penyiapan dasar dan menambahkan lapisan fitur lapis demi lapis hingga Anda memberikan informasi, gaya, dan fungsi yang cukup untuk memuaskan sebagian besar pengguna. Untuk mencapainya, Anda menggunakan prinsip progressive enhancement, yang menyatakan bahwa Anda memulai dengan solusi yang paling mendasar dan andal, lalu menambahkan lapisan fungsionalitas secara progresif. Jika satu lapisan gagal berfungsi karena alasan tertentu, navigasi akan tetap berfungsi karena akan beralih dengan lancar ke lapisan di bawahnya.

Struktur dasar

Untuk navigasi dasar, Anda memerlukan dua hal: elemen <a> dan beberapa baris CSS untuk meningkatkan gaya dan tata letak default link Anda.

• HTML

  <a href="/home">Home</a>
  <a href="/about-us">About us</a>
  <a href="/pricing">Pricing</a>
  <a href="/contact">Contact</a>
  

• CSS

  /* Define variables for your colors */
  :root {
    --color-shades-dark: rgb(25, 25, 25);
  }
  
  /* Use the alternative box model
  Details: <https://web.dev/learn/css/box-model/> */
  *{
    box-sizing: border-box;
  }
  
  /* Basic font styling */
  body {
    font-family: Segoe UI, system-ui, -apple-system, sans-serif;
    font-size: 1.6rem;
  }
  
  /* Link styling */
  a {
    --text-color: var(--color-shades-dark);
    border-block-end: 3px solid var(--border-color, transparent);
    color: var(--text-color);
    display: inline-block;
    margin-block-end: 0.5rem; /* See note at the bottom of this chapter */
    margin-inline-end: 0.5rem;
    padding: 0.1rem;
    text-decoration: none;
  }
  
  /* Change the border-color on :hover and :focus */
  a:where(:hover, :focus) {
    --border-color: var(--text-color);
  }
  

Lihat Langkah 1: HTML dan CSS Dasar" di CodePen.

Cara ini berfungsi dengan baik untuk sebagian besar pengguna, terlepas dari cara mereka mengakses situs. Navigasi dapat diakses dengan mouse, keyboard, perangkat sentuh, atau pembaca layar, tetapi masih ada ruang untuk peningkatan. Anda dapat meningkatkan pengalaman dengan memperluas pola dasar ini dengan fungsionalitas dan informasi tambahan.

Berikut tindakan yang dapat Anda lakukan:

• Tandai halaman yang aktif.
• Mengumumkan jumlah item kepada pengguna pembaca layar.
• Tambahkan penanda dan izinkan pengguna pembaca layar mengakses navigasi secara langsung menggunakan pintasan.
• Sembunyikan navigasi di area pandang yang sempit.
• Meningkatkan gaya fokus.

Catatan: margin-inline-end dan margin-block-end dikenal sebagai properti logis dan alternatif untuk menulis margin-right dan margin-bottom. Properti logis adalah cara baru untuk menggunakan arah dan dimensi, yang memungkinkan Anda mengontrol tata letak melalui pemetaan logis, bukan fisik. Hal ini sangat berguna jika Anda menangani situs yang ditampilkan dalam berbagai bahasa dan mode penulisan, seperti kanan ke kiri. Lihat "Properti fisik vs. logis" di CodePen sebagai contoh.

Menandai halaman aktif

Untuk menandai halaman yang aktif, Anda dapat menambahkan class ke link yang sesuai.

<a href="/about-us" class="active-page">About us</a>

Masalah dengan pendekatan ini adalah bahwa pendekatan ini menyampaikan informasi link mana yang aktif secara visual murni. Pengguna pembaca layar tunanetra tidak dapat membedakan antara halaman aktif dan halaman lainnya. Untungnya, standar Accessible Rich Internet Applications (ARIA) juga menawarkan cara untuk menyampaikan informasi ini secara semantik. Gunakan atribut dan nilai aria-current="page", bukan class.

aria-current (status) menunjukkan elemen yang mewakili item saat ini dalam penampung atau kumpulan elemen terkait. Token halaman yang digunakan untuk menunjukkan link dalam kumpulan link penomoran halaman, dengan link yang diberi gaya visual untuk mewakili halaman yang saat ini ditampilkan. [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

Dengan atribut tambahan, pembaca layar kini mengumumkan sesuatu seperti "halaman saat ini, link, Tentang Kami", bukan hanya "link, Tentang Kami".

<a href="/about-us" aria-current="page" class="active-page">About us</a>

Efek samping yang praktis adalah Anda dapat menggunakan atribut untuk memilih link aktif di CSS, sehingga class active-page tidak lagi diperlukan.

<a href="/home">Home</a>
<a href="/about-us" aria-current="page">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}

Lihat Langkah 2: Tandai halaman aktif di CodePen.

Mengumumkan jumlah item

Dengan melihat navigasi, pengguna yang dapat melihat dapat mengetahui bahwa navigasi tersebut hanya berisi empat link. Pengguna pembaca layar tunanetra tidak dapat memperoleh informasi ini secepat itu. Mereka mungkin harus memeriksa seluruh daftar link. Hal ini mungkin tidak menjadi masalah jika daftarnya pendek seperti dalam contoh ini, tetapi jika berisi 40 link, tugas ini dapat merepotkan. Jika pengguna pembaca layar mengetahui sejak awal bahwa navigasi berisi banyak link, mereka mungkin memutuskan untuk menggunakan cara navigasi lain yang lebih efisien, seperti penelusuran situs.
Cara yang baik untuk menyampaikan jumlah item di awal adalah dengan menggabungkan setiap link dalam item daftar (<li>), yang disusun bertingkat dalam daftar yang tidak diurutkan (<ul>).

<ul>
  <li>
     <a href="/home">Home</a>
  </li>
  <li>
    <a href="/about-us" aria-current="page">About us</a>
  </li>
  <li>
    <a href="/pricing">Pricing</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

Saat pengguna pembaca layar menemukan daftar, software-nya akan mengumumkan sesuatu seperti "daftar, 4 item".

Berikut demo navigasi yang digunakan dengan pembaca layar NVDA di Windows.

Sekarang Anda harus menyesuaikan gaya visual agar terlihat seperti sebelumnya.

/* Remove the default list styling and create a flexible layout for the list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
  --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

Penggunaan daftar dapat memberikan banyak keuntungan bagi pengguna pembaca layar:

• Mereka bisa mendapatkan jumlah total item sebelum berinteraksi dengan item tersebut.
• Mereka mungkin menggunakan pintasan untuk berpindah dari satu item daftar ke item daftar lainnya.
• Mereka mungkin menggunakan pintasan untuk berpindah dari satu daftar ke daftar lainnya.
• Pembaca layar dapat mengumumkan indeks item saat ini (misalnya, "item daftar, dua dari empat").

Selain itu, jika halaman ditampilkan tanpa CSS, daftar akan menampilkan link sebagai grup item yang koheren, bukan hanya tumpukan link.

Detail penting tentang VoiceOver di Safari adalah Anda akan kehilangan semua keunggulan ini jika menetapkan list-style: none. Hal ini sesuai dengan desain. Tim WebKit memutuskan untuk menghapus semantik daftar, jika daftar tidak terlihat seperti daftar. Bergantung pada kompleksitas navigasi Anda, hal ini mungkin menjadi masalah atau tidak. Di satu sisi, navigasi masih dapat digunakan dan hanya memengaruhi VoiceOver di Safari. VoiceOver dengan Chrome atau Firefox masih mengumumkan jumlah item, serta pembaca layar lainnya, seperti NVDA. Di sisi lain, informasi semantik dapat sangat berguna dalam beberapa situasi. Untuk membuat keputusan tersebut, Anda harus menguji navigasi dengan pengguna pembaca layar yang sebenarnya dan mendapatkan masukan dari mereka. Jika Anda memutuskan bahwa Anda memerlukan VoiceOver di Safari untuk berperilaku seperti semua pembaca layar lainnya, Anda dapat mengatasi masalah ini dengan menetapkan peran daftar ARIA secara eksplisit di <ul>. Tindakan ini akan mengembalikan perilaku ke status sebelum Anda menghapus gaya daftar. Secara visual, daftar masih terlihat sama.

<ul role="list">
  <li>
     <a href="/home">Home</a>
  </li>
  ...
</ul>

Catatan: Jika Anda memvalidasi HTML dan layanan validasi melaporkan peringatan seperti "Peran daftar tidak diperlukan untuk elemen ul", Anda dapat mengabaikannya dengan aman.

Lihat Langkah 3: Mengumumkan jumlah item di CodePen.

Menambahkan tempat terkenal

Dengan sedikit upaya, Anda telah membuat peningkatan yang signifikan bagi pengguna pembaca layar, tetapi ada satu hal lagi yang dapat Anda lakukan. Navigasi secara semantik masih berupa daftar link dan sulit untuk mengetahui bahwa daftar khusus ini adalah navigasi utama situs Anda. Anda dapat mengubah daftar biasa ini menjadi daftar navigasi dengan menggabungkan <ul> dalam elemen <nav>.

Penggunaan elemen <nav> memiliki beberapa keuntungan. Khususnya, pembaca layar akan mengumumkan sesuatu seperti "navigasi", saat pengguna berinteraksi dengannya, dan menambahkan penanda ke halaman. Landmark adalah wilayah khusus di halaman, seperti <header>, <footer>, atau <main>, yang dapat diakses oleh pembaca layar. Memiliki penanda di halaman dapat berguna, karena memungkinkan pengguna pembaca layar mengakses bagian penting di halaman secara langsung tanpa harus berinteraksi dengan bagian halaman lainnya. Misalnya, Anda dapat berpindah dari satu penanda ke penanda lain dengan menekan tombol D di NVDA. Di VoiceOver, Anda dapat menggunakan rotor untuk mencantumkan semua penanda di halaman dengan menekan VO + U.

Rotor di VoiceOver yang mencantumkan semua penanda di halaman.

Dalam daftar ini, Anda akan melihat 4 penanda: banner yang merupakan elemen <header>, navigation adalah <nav>, main adalah elemen <main>, dan content information adalah <footer>. Daftar ini tidak boleh terlalu panjang, Anda hanya perlu menandai bagian penting UI sebagai penanda, seperti Site Search, navigasi lokal, atau penomoran halaman.

Jika Anda memiliki navigasi di seluruh situs, navigasi lokal untuk halaman, dan penomoran halaman di satu halaman, Anda mungkin juga memiliki 3 elemen <nav>. Tidak masalah, tetapi sekarang ada tiga penanda navigasi dan secara semantik semuanya terlihat sama. Sulit untuk membedakannya, kecuali jika Anda mengetahui struktur halaman dengan sangat baik.

Rotor di VoiceOver mencantumkan tiga tempat terkenal navigasi tanpa label.

Agar dapat dibedakan, Anda harus memberi label menggunakan aria-labelledby atau aria-label.

<nav aria-label="Main">
    <ul>
      <li>
         <a href="/home">Home</a>
      </li>
      ...
  </ul>
</nav>
...
<nav aria-label="Select page">
    <ul>
      <li>
         <a href="/page-1">1</a>
      </li>
      ...
    </ul>
</nav>

Jika label yang Anda pilih sudah ada di suatu tempat di halaman, Anda dapat menggunakan aria-labelledby sebagai gantinya dan mereferensikan label yang ada menggunakan atribut id.

<nav aria-labelledby="pagination_heading">
  <h2 id="pagination_heading">Select a page</h2>
  <ul>
    <li>
       <a href="/page-1">1</a>
    </li>
    ...
  </ul>
</nav>

Label yang ringkas sudah cukup, jangan terlalu panjang. Hilangkan ekspresi seperti "navigasi" atau "menu" karena pembaca layar sudah memberikan informasi ini kepada pengguna.

VoiceOver mencantumkan penanda "banner", "navigasi utama", "utama", "navigasi halaman", "pilih navigasi halaman", dan "informasi konten".

Lihat Langkah 4: Menambahkan tempat terkenal di CodePen.

Menyembunyikan navigasi di area pandang sempit

Secara pribadi, saya tidak terlalu suka menyembunyikan navigasi utama di area pandang yang sempit, tetapi jika daftar link terlalu panjang, tidak ada cara lain. Jika demikian, pengguna akan melihat tombol berlabel "Menu" atau ikon burger atau kombinasi, bukan daftar. Mengklik tombol tersebut akan menampilkan dan menyembunyikan daftar. Jika Anda mengetahui JavaScript dan CSS dasar, tugas tersebut dapat dilakukan, tetapi ada beberapa hal terkait UX dan aksesibilitas yang harus Anda perhatikan.

• Anda harus menyembunyikan daftar dengan cara yang mudah diakses.
• Navigasi harus dapat diakses dengan keyboard.
• Navigasi harus mengomunikasikan apakah navigasi tersebut terlihat atau tidak.

Menambahkan tombol hamburger

Karena Anda mengikuti prinsip progressive enhancement, Anda harus memastikan bahwa navigasi Anda tetap berfungsi dan masuk akal meskipun JavaScript dinonaktifkan.
Hal pertama yang diperlukan navigasi Anda adalah tombol burger. Anda membuatnya dalam HTML di elemen template, meng-clone-nya di JavaScript, dan menambahkannya ke navigasi.

Hasil: Alih-alih link, navigasi menampilkan tombol burger di area pandang yang sempit.

<nav id="mainnav">
  ...
</nav>

<template id="burger-template">
  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
    <svg width="24" height="24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
    </svg>
  </button>
</template>

1. Atribut aria-expanded memberi tahu software pembaca layar apakah elemen yang dikontrol tombol diperluas atau tidak.
2. aria-label memberi tombol label aksesibilitas, yaitu alternatif teks untuk ikon burger.
3. Anda menyembunyikan <svg> dari teknologi pendukung menggunakan aria-hidden karena sudah memiliki label teks yang disediakan oleh aria-label.
4. aria-controls memberi tahu teknologi pendukung, yang mendukung atribut (misalnya JAWS), elemen mana yang dikontrol tombol.

const nav = document.querySelector('#mainnav')
const list = nav.querySelector('ul');
const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
const button = burgerClone.querySelector('button');

// Toggle aria-expanded attribute
button.addEventListener('click', e => {
  // aria-expanded="true" signals that the menu is currently open
  const isOpen = button.getAttribute('aria-expanded') === "true"
  button.setAttribute('aria-expanded', !isOpen);
});

// Hide list on keydown Escape
nav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    button.setAttribute('aria-expanded', false);
  }
});

// Add the button to the page
nav.insertBefore(burgerClone, list);

1. Pengguna akan merasa nyaman jika memiliki kemampuan untuk menutup navigasi kapan pun mereka mau, misalnya dengan menekan tombol Escape.
2. Penting untuk menggunakan insertBefore, bukan appendChild, karena tombol harus menjadi elemen pertama dalam navigasi Anda. Jika pengguna keyboard atau pembaca layar menekan Tab setelah mengklik tombol, mereka akan memfokuskan item pertama dalam daftar. Jika tombol muncul setelah daftar, hal itu tidak akan terjadi.

Selanjutnya, Anda akan mereset gaya default tombol dan memastikan tombol hanya terlihat di area pandang yang sempit.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
  }
}

/* Reset button styling */
button {
  all: unset;
  display: var(--nav-button-display, flex);
}

Lihat Langkah 5: Menambahkan tombol burger di CodePen.

Menyembunyikan daftar

Sebelum menyembunyikan daftar, posisikan dan tata gaya navigasi dan daftar agar tata letaknya dioptimalkan untuk area pandang yang sempit, tetapi tetap terlihat bagus di layar yang lebih besar.
Pertama, hapus <nav> dari alur alami halaman dan tempatkan di sudut ujung atas area pandang.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
}

nav {
  position: var(--nav-position, fixed);
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

Selanjutnya, ubah tata letak pada area pandang sempit dengan menambahkan properti kustom baru (—-nav-list-layout). Tata letak defaultnya adalah kolom dan beralih ke baris di layar yang lebih besar.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }

  ul {
    --nav-list-layout: row;
  }
}

ul {
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Navigasi Anda akan terlihat seperti ini di area pandang yang sempit.

Tombol hamburger dan daftar ditempatkan di sudut ujung atas area pandang.

Daftar ini jelas memerlukan beberapa CSS. Kita akan memindahkannya ke sudut ujung atas, membuatnya mengisi seluruh layar secara vertikal, menerapkan background-color dan box-shadow.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
  
  ul {
    --nav-list-layout: row;
    --nav-list-position: static;
    --nav-list-padding: 0;
    --nav-list-height: auto;
    --nav-list-width: 100%;
    --nav-list-shadow: none;
  }
}

ul {
  background: rgb(255, 255, 255);
  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  height: var(--nav-list-height, 100vh);
  list-style: none;
  margin: 0;
  padding: var(--nav-list-padding, 2rem);
  position: var(--nav-list-position, fixed);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  width: var(--nav-list-width, min(22rem, 100vw));
}

button {
  all: unset;
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 1;
}

Daftar akan terlihat seperti ini di area pandang sempit, lebih seperti sidebar daripada daftar sederhana.

Terakhir, sembunyikan daftar, tampilkan hanya saat pengguna mengklik tombol sekali dan sembunyikan saat mereka mengklik lagi. Penting untuk hanya menyembunyikan daftar dan bukan seluruh navigasi karena menyembunyikan navigasi juga berarti menyembunyikan penanda penting.

Sebelumnya, Anda telah menambahkan peristiwa klik ke tombol untuk mengalihkan nilai atribut aria-expanded. Anda dapat menggunakan informasi tersebut sebagai kondisi untuk menampilkan dan menyembunyikan daftar di CSS.

@media (min-width: 48em) {
  ul {
    --nav-list-visibility: visible;
  }
}

ul {
  visibility: var(--nav-list-visibility, visible);
}

/* Hide the list on narrow viewports, if it comes after an element with
   aria-expanded set to "false". */
[aria-expanded="false"] + ul {
  visibility: var(--nav-list-visibility, hidden);
}

Penting untuk menggunakan deklarasi properti seperti visibility: hidden atau display: none, bukan opacity: 0 atau translateX(100%) untuk menyembunyikan daftar. Properti ini memastikan bahwa link tidak dapat difokuskan saat navigasi disembunyikan. Menggunakan opacity atau translate akan menghapus konten secara visual sehingga link tidak akan terlihat, tetapi masih dapat diakses menggunakan keyboard, yang akan membingungkan dan menjengkelkan. Menggunakan visibility atau display akan menyembunyikannya secara visual dan membuatnya tidak dapat diakses, sehingga menyembunyikannya untuk semua pengguna.

Lihat Langkah 6: Menyembunyikan daftar.

Menganimasikan daftar

Jika Anda bertanya-tanya mengapa harus menggunakan visibility: hidden; daripada display: none;, alasannya adalah karena Anda dapat menganimasikan visibilitas. Properti ini hanya memiliki dua status, hidden dan visible, tetapi Anda dapat menggabungkannya dengan properti lain seperti transform atau opacity untuk membuat efek slide-in atau fade-in. Hal ini tidak akan berfungsi dengan display: none karena properti display tidak dapat dianimasikan.

CSS berikut mentransisikan opacity untuk membuat efek fade-in dan fade-out.

ul {
  transition: opacity 0.6s linear, visibility 0.3s linear;
  visibility: var(--nav-list-visibility, visible);
}

[aria-expanded="false"] + ul {
  opacity: 0;
  visibility: var(--nav-list-visibility, hidden);
}

Jika Anda ingin menganimasikan gerakan, sebaiknya gabungkan properti transition dalam kueri media prefers-reduced-motion karena animasi dapat memicu mual, pusing, dan sakit kepala pada beberapa pengguna.

ul {
  visibility: var(--nav-list-visibility, visible);
}

@media (prefers-reduced-motion: no-preference) {
  ul {
    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), visibility 0.3s linear;
  }
}

[aria-expanded="false"] + ul {
  transform: var(--nav-list-transform, translateX(100%));
  visibility: var(--nav-list-visibility, hidden);
}

Hal ini memastikan bahwa hanya orang yang tidak memiliki preferensi untuk mengurangi gerakan yang akan melihat animasi.

Lihat Langkah 7: Menganimasikan daftar di CodePen.

Meningkatkan gaya fokus

Pengguna keyboard mengandalkan gaya fokus elemen untuk orientasi dan navigasi di halaman. Gaya fokus default lebih baik daripada tidak ada gaya fokus (yang terjadi jika Anda menetapkan outline: none), tetapi memiliki gaya fokus kustom yang lebih terlihat jelas akan meningkatkan pengalaman pengguna.

Berikut tampilan gaya fokus default pada link di Chrome 103.

Anda dapat meningkatkannya dengan memberikan gaya Anda sendiri dalam warna Anda sendiri. Dengan menggunakan :focus-visible, bukan :focus, Anda mengizinkan browser memutuskan kapan waktu yang tepat untuk menampilkan gaya fokus. Gaya :focus akan terlihat oleh semua orang, pengguna mouse, keyboard, dan sentuh, terlepas dari apakah mereka membutuhkannya atau tidak. Dengan :focus-visible, browser menggunakan heuristik internal untuk memutuskan apakah akan menampilkannya hanya kepada pengguna keyboard atau kepada semua orang.

/* Remove the default :focus outline */
*:focus {
  outline: none;
}

/* Show a custom outline on :focus-visible */
*:focus-visible {
  outline: 2px solid var(--color-shades-dark);
  outline-offset: 4px;
}

Dukungan browser untuk :focus-visible

Browser Support

• 86
• 86
• 85
• 15.4

Source

Ada berbagai cara untuk menandai item saat difokuskan. Sebaiknya gunakan properti outline karena tidak merusak tata letak, yang dapat terjadi dengan border, dan berfungsi dengan baik dengan mode kontras tinggi di Windows. Properti yang tidak berfungsi dengan baik adalah background-color atau box-shadow, karena mungkin tidak ditampilkan sama sekali dengan setelan kontras kustom.

Lihat Langkah 8: Tingkatkan gaya fokus di CodePen.

Selamat! Anda telah membuat navigasi utama yang ditingkatkan secara progresif, kaya secara semantik, mudah diakses, dan mobile-friendly.

Selalu ada hal yang dapat ditingkatkan, misalnya:

• Anda dapat mempertimbangkan untuk menjebak fokus di dalam navigasi atau membuat bagian halaman lainnya tidak aktif di area pandang yang sempit.
• Anda dapat menambahkan link lewati di bagian atas halaman untuk memungkinkan pengguna keyboard melewati navigasi.

Jika Anda ingat bagaimana artikel ini dimulai, dengan tujuan bahwa solusinya "tidak boleh terlalu sederhana, atau terlalu rumit", di situlah kita berada sekarang. Namun, navigasi bisa saja terlalu rumit.

Navigasi versus menu

Ada perbedaan yang jelas antara navigasi dan menu. Navigasi adalah kumpulan link untuk membuka dokumen terkait. Menu adalah kumpulan tindakan yang dapat dilakukan dalam dokumen. Terkadang tugas-tugas ini tumpang tindih. Anda mungkin memiliki navigasi yang juga menyertakan tombol yang melakukan tindakan, seperti membuka jendela modal, atau Anda mungkin memiliki menu yang salah satu tindakannya adalah membuka halaman lain, seperti halaman bantuan. Jika demikian, penting bagi Anda untuk tidak menggabungkan peran ARIA, tetapi mengidentifikasi tujuan utama komponen Anda dan memilih markup serta peran yang sesuai.

Elemen <nav> memiliki peran ARIA implisit navigasi yang cukup untuk menyampaikan bahwa elemen tersebut adalah navigasi, tetapi sering kali Anda melihat situs juga menggunakan menu, menubar, dan menuitem. Karena terkadang kita menggunakan istilah ini secara bergantian, menggabungkannya untuk meningkatkan pengalaman pengguna pembaca layar mungkin masuk akal. Sebelum kita mempelajari mengapa hal itu biasanya tidak terjadi, mari kita lihat definisi resmi dari peran-peran ini.

Peran navigasi

Kumpulan elemen navigasi (biasanya link) untuk menavigasi dokumen atau dokumen terkait.

navigation (peran) WAI-ARIA 1.1

Peran menu

Menu sering kali berupa daftar tindakan atau fungsi umum yang dapat dipanggil pengguna. Peran menu sesuai jika daftar item menu ditampilkan dengan cara yang mirip dengan menu di aplikasi desktop.

menu (peran) WAI-ARIA 1.1

Peran menubar

Presentasi menu yang biasanya tetap terlihat dan biasanya ditampilkan secara horizontal. Peran panel menu digunakan untuk membuat panel menu yang mirip dengan yang ada di aplikasi desktop Windows, Mac, dan Gnome. Panel menu digunakan untuk membuat kumpulan perintah yang sering digunakan secara konsisten. Penulis harus memastikan bahwa interaksi panel menu mirip dengan interaksi panel menu standar di antarmuka pengguna grafis desktop.

menubar (peran) WAI-ARIA 1.1

Peran menuitem

Opsi dalam kumpulan pilihan yang terdapat dalam menu atau menubar.

menuitem (peran) WAI-ARIA 1.1

Spesifikasinya sangat jelas di sini, gunakan navigasi untuk menavigasi dokumen atau dokumen terkait dan menu hanya untuk daftar tindakan atau fungsi yang mirip dengan menu di aplikasi desktop. Jika Anda tidak sedang membuat Google Dokumen berikutnya, Anda mungkin tidak memerlukan peran menu apa pun untuk navigasi utama.

Kapan menu sesuai?

Penggunaan utama item menu bukanlah navigasi, melainkan untuk melakukan tindakan. Misalnya, Anda memiliki daftar atau tabel data dan pengguna dapat melakukan tindakan tertentu pada setiap item dalam daftar. Anda dapat menambahkan tombol ke setiap baris dan menampilkan tindakan saat pengguna mengklik tombol tersebut.

<ul>
  <li>
    Product 1

    <button aria-expanded="false" aria-controls="options1">Edit</button>

    <div role="menu" id="options1">
      <button role="menuitem">
        Duplicate
      </button>
      <button role="menuitem">
        Delete
      </button>
      <button role="menuitem">
        Disable
      </button>
    </div>
  </li>
  <li>
    Product 2
    ...
  </li>
</ul>

Implikasi penggunaan peran menu

Sangat penting untuk menggunakan peran menu ini dengan bijak karena banyak hal yang bisa salah.

Menu memerlukan struktur DOM tertentu. menuitem harus merupakan item turunan langsung dari menu. Kode berikut dapat merusak perilaku semantik:

 <!-- Wrong, don't do this -->
<ul role="menu">
  <li>
    <a href="#" role="menuitem">Item 1</a>
  </li>
</ul>

Pengguna yang cerdas mengharapkan pintasan keyboard tertentu berfungsi dengan menu dan panel menu. Berdasarkan Panduan Praktik Penulisan ARIA (APG), hal ini mencakup:

• Enter dan Spasi untuk memilih item menu.
• Tombol panah ke semua arah untuk berpindah antar-item.
• Tombol Home dan End untuk memindahkan fokus ke item pertama atau terakhir.
• a-z untuk memindahkan fokus ke item menu berikutnya dengan label yang dimulai dengan karakter yang diketik.
• Esc untuk menutup menu.

Jika pembaca layar mendeteksi menu, software mungkin akan otomatis mengubah mode penjelajahan, sehingga pintasan yang disebutkan sebelumnya dapat digunakan. Pengguna pembaca layar yang belum berpengalaman mungkin tidak dapat menggunakan menu karena mereka tidak mengetahui pintasan ini atau cara menggunakannya.

Hal yang sama berlaku untuk pengguna keyboard yang mungkin berharap dapat menggunakan Shift dan Shift + Tab.

Ada banyak hal yang perlu dipertimbangkan saat Anda membuat menu dan panel menu, dengan apakah penggunaan menu dan panel menu tersebut sudah tepat sebagai pertimbangan utama. Saat Anda membuat situs biasa, elemen nav dengan daftar dan link adalah semua yang Anda butuhkan. Hal ini juga mencakup Aplikasi Web Satu Halaman (SPA) atau aplikasi web. Stack yang mendasarinya tidak menjadi masalah. Kecuali jika Anda membuat sesuatu yang sangat mirip dengan aplikasi desktop, hindari peran menu.

Referensi lainnya

• Fixing Lists oleh Scott O'hara.
• Don't Use ARIA Menu Roles for Site Nav oleh Adrian Roselli.
• Menu & Tombol Menu oleh Heydon Pickering.
• Menu WAI-ARIA, dan alasan Anda harus menanganinya dengan sangat hati-hati oleh Marco Zehe.
• Menyembunyikan konten secara bertanggung jawab oleh Kitty Giraudel.
• :focus-visible Is Here oleh Matthias Ott.