Membuat Breadcrumb Navigasi dengan HTML Semantik dan Atribut aria-label

Breadcrumb adalah navigasi tambahan yang menunjukkan posisi halaman saat ini di dalam hierarki sebuah situs. Pada situs dokumentasi, misalnya, halaman tentang elemen navigasi dapat berada pada jalur konseptual seperti “Beranda → HTML → Navigasi → Breadcrumb”. Pola tersebut membantu pengguna memahami konteks halaman sekaligus menyediakan jalan singkat menuju tingkat hierarki yang lebih tinggi. Untuk pembaca yang sudah dapat membuat navigasi HTML dasar, bagian penting berikutnya bukan sekadar membuat deretan tautan, tetapi memilih elemen yang memiliki makna semantik tepat. HTML menyediakan elemen <nav> untuk sebuah bagian halaman yang berisi tautan navigasi. Breadcrumb merupakan salah satu kasus yang sesuai untuk elemen tersebut. Karena satu halaman dapat mempunyai beberapa area <nav>, seperti navigasi utama dan breadcrumb, area breadcrumb juga perlu memiliki nama yang dapat dikenali teknologi bantu. Tutorial ini menggunakan aria-label="Breadcrumb" untuk memberi nama pada landmark navigasi tersebut. Implementasinya tidak memerlukan JavaScript, framework, library ARIA, ataupun dependency eksternal: browser modern dan file HTML biasa sudah cukup untuk mempraktikkannya.

Kita akan membangun contoh dalam satu file index.html agar hubungan antara struktur HTML, semantik, dan hasil di browser mudah diperiksa. Item breadcrumb akan direpresentasikan sebagai ordered list <ol> karena urutan tingkat halaman memiliki arti. Item yang masih dapat dituju menggunakan elemen <a>, sedangkan item terakhir mewakili halaman yang sedang dibuka dan tidak perlu menjadi tautan menuju dirinya sendiri. Contoh juga memakai aria-current="page" pada item terakhir untuk menyatakan halaman aktif secara eksplisit kepada teknologi aksesibilitas. Separator visual akan berupa karakter teks dalam elemen dengan aria-hidden="true", sehingga pemisah yang dekoratif tidak ikut membebani nama atau pembacaan item. Perlu dibedakan bahwa aria-label menamai wilayah navigasi, bukan menggantikan struktur daftar, teks tautan, ataupun hierarki dokumen. Dengan pemisahan peran tersebut, markup tetap sederhana untuk pengguna visual, pengguna keyboard, dan teknologi bantu, serta lebih mudah diperiksa melalui DOM dan accessibility tree yang disediakan DevTools browser.

Landasan Sains dan Prinsip Kerja Metode

HTML semantik memberi makna struktural pada konten, bukan hanya menentukan bagaimana konten tampak. Elemen <nav> merepresentasikan bagian halaman yang berisi tautan navigasi. Dalam model aksesibilitas browser, elemen ini umumnya dipetakan menjadi landmark navigation sehingga teknologi bantu dapat membantu pengguna menemukan bagian navigasi. Ketika terdapat lebih dari satu navigasi, nama yang membedakan masing-masing landmark menjadi penting. Atribut aria-label="Breadcrumb" memberikan accessible name langsung kepada <nav>, sehingga wilayah tersebut dapat dibedakan, misalnya, dari navigasi utama. Nama itu tidak harus terlihat sebagai teks di halaman karena aria-label memang dapat menyediakan label yang tidak tampak. Namun ARIA bukan pengganti HTML semantik: menggunakan <nav> tetap lebih sesuai daripada membuat kontainer generik lalu menambahkan role yang sebenarnya sudah tersedia secara native. Prinsip “gunakan HTML native ketika tersedia” mengurangi markup tambahan dan membuat maksud struktur lebih mudah dipahami oleh pengembang berikutnya.

Di dalam landmark tersebut, breadcrumb adalah rangkaian berurutan. Karena itu, <ol> cocok sebagai wadah dan setiap tingkat menjadi <li>. Daftar juga tetap bermakna apabila CSS gagal dimuat atau gaya visual berubah. Breadcrumb bukan pengganti navigasi utama dan bukan pula cerminan wajib dari URL secara literal. Hierarki breadcrumb biasanya mencerminkan hubungan informasi yang berguna bagi pengguna. Sebagai contoh, sebuah URL teknis dapat memiliki parameter atau struktur routing yang tidak layak ditampilkan sebagai item breadcrumb. Tautan pada tingkat sebelumnya harus mempunyai href yang benar menuju tujuan sebenarnya. Halaman saat ini umumnya ditampilkan sebagai teks, lalu ditandai aria-current="page". Nilai page menyatakan bahwa elemen tersebut merepresentasikan halaman aktif dalam sekumpulan item. Dalam tutorial ini atribut ditempatkan pada <span> yang berisi nama halaman aktif. Ini menghindari tautan redundan menuju halaman yang sedang dibuka sekaligus menyediakan status semantik yang dapat diekspos melalui accessibility API browser.

Pemisah seperti garis miring, chevron, atau tanda lebih besar berfungsi untuk komunikasi visual mengenai arah hierarki, tetapi biasanya bukan informasi yang perlu dibaca berulang oleh teknologi bantu ketika struktur daftar sudah memberikan organisasi. Contoh ini menggunakan <span aria-hidden="true">/</span> sebagai separator. aria-hidden="true" membuat elemen tersebut diabaikan oleh accessibility tree beserta turunannya, sementara karakternya tetap terlihat secara visual. Oleh sebab itu atribut ini jangan ditempatkan pada elemen yang berisi tautan atau informasi yang harus tersedia bagi pengguna teknologi bantu. Aksesibilitas juga tidak dapat dinilai hanya dari tampilan. Verifikasi ideal mencakup struktur DOM, urutan fokus keyboard, tujuan tautan, dan accessibility tree. Perilaku pengucapan spesifik dapat berbeda antara browser, sistem operasi, dan screen reader, sehingga tutorial ini tidak mengandalkan satu frasa suara tertentu sebagai bukti keberhasilan. Sasaran yang lebih stabil adalah memastikan landmark memiliki nama, daftar mempunyai urutan logis, tautan dapat difokuskan, dan halaman aktif teridentifikasi secara semantik.

Formula, Komposisi Bahan, atau Spesifikasi Parameter

Breadcrumb tidak mempunyai “formula” numerik, tetapi mempunyai komponen dan parameter semantik yang dapat diperiksa. Tabel berikut merangkum konfigurasi yang digunakan dalam contoh. Beberapa pilihan, seperti teks separator, merupakan konvensi presentasi, sedangkan elemen nav, daftar terurut, tujuan tautan, dan penandaan halaman aktif memengaruhi struktur serta makna. Spesifikasi ini sengaja menggunakan fitur HTML dan ARIA native tanpa dependency tambahan agar pembaca dapat membedakan kebutuhan inti dari dekorasi opsional.

Komponen	Spesifikasi/Rasio	Fungsi Teknis
Landmark navigasi	`<nav>`	Mengidentifikasi bagian halaman sebagai navigasi.
Nama landmark	`aria-label="Breadcrumb"`	Memberi accessible name yang membedakan breadcrumb dari navigasi lain.
Wadah urutan	`<ol>`	Merepresentasikan rangkaian tingkat yang urut.
Item tingkat	Satu `<li>` per tingkat	Mengelompokkan setiap node dalam jalur breadcrumb.
Item ancestor	`<a href="...">`	Menyediakan navigasi ke tingkat sebelumnya.
Halaman aktif	Teks non-link	Menghindari tautan redundan menuju halaman yang sedang dibuka.
Status aktif	`aria-current="page"`	Menyatakan elemen merepresentasikan halaman saat ini.
Separator visual	Karakter `/`	Membantu pembaca visual membedakan tingkat.
Separator aksesibilitas	`aria-hidden="true"`	Menyembunyikan separator dekoratif dari accessibility tree.
Dependency	Tidak ada library eksternal	Menjaga contoh berbasis fitur native HTML dan ARIA.

Jangan menaruh aria-hidden="true" pada <nav>, <ol>, atau elemen yang mengandung tautan breadcrumb. Atribut tersebut akan menyembunyikan subtree terkait dari accessibility API. Gunakan hanya pada separator yang memang dekoratif. Selain itu, jangan menganggap aria-label memperbaiki URL yang salah atau struktur hierarki yang keliru; atribut tersebut hanya memberi nama aksesibel pada elemen tempat atribut diterapkan.

Panduan Langkah Kerja Bertahap

Langkah 1

Buat Dokumen HTML Mandiri sebagai Lingkungan Praktik

Mulailah dengan satu file bernama index.html. Tidak diperlukan server web untuk contoh dasar ini; file dapat dibuka langsung melalui browser modern. Struktur dokumen lengkap penting bagi pemula karena breadcrumb nantinya berada dalam konteks dokumen yang valid, bukan snippet tanpa konteks. Atribut lang="id" menetapkan bahasa utama dokumen sebagai bahasa Indonesia dan <meta charset="utf-8"> menetapkan encoding karakter. Pada tahap pertama, tambahkan navigasi utama sederhana. Keberadaan navigasi tersebut juga memberi alasan praktis mengapa breadcrumb perlu diberi nama yang membedakannya dari landmark navigation lain pada langkah berikutnya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Belajar Breadcrumb Semantik</title>
</head>
<body>
  <header>
    <nav aria-label="Navigasi utama">
      <a href="/">Beranda</a>
      <a href="/html/">HTML</a>
    </nav>
  </header>

  <main>
    <h1>Membuat Breadcrumb</h1>
    <p>Halaman latihan untuk breadcrumb HTML semantik.</p>
  </main>
</body>
</html>

Simpan file lalu buka index.html di browser. Hasil yang diharapkan adalah dua tautan pada bagian header, judul “Membuat Breadcrumb”, dan satu paragraf. Ketika file dibuka lewat skema file:, tautan absolut seperti /html/ belum tentu mengarah ke halaman lokal yang Anda miliki; pada saat ini tautan tersebut berfungsi sebagai ilustrasi struktur situs, bukan target lokal yang harus diklik. Verifikasi tahap ini melalui DevTools pada panel Elements atau Inspector: pastikan terdapat satu header, satu nav, satu main, dan satu h1. Jika browser menampilkan source sebagai teks mentah, periksa bahwa file benar-benar berekstensi .html, bukan misalnya index.html.txt. Setelah struktur dasar tampil, dokumen siap menerima breadcrumb.

Langkah 2

Tambahkan Landmark Breadcrumb dan Daftar Terurut

Selanjutnya tambahkan breadcrumb di dalam <main>, tepat sebelum <h1>. Di sinilah elemen semantik mulai bekerja bersama ARIA. Gunakan <nav aria-label="Breadcrumb"> untuk menandai wilayah navigasi dan memberikan nama aksesibel. Nilai “Breadcrumb” adalah nama yang ringkas untuk fungsi landmark. Di dalamnya, gunakan <ol> karena posisi setiap tingkat mempunyai urutan yang bermakna: Beranda mendahului HTML, lalu Navigasi, kemudian halaman aktif. Anda tidak perlu menambahkan role="navigation" pada <nav>, karena elemen tersebut sudah mempunyai semantik navigasi native.

<main>
  <nav aria-label="Breadcrumb">
    <ol>
      <li><a href="/">Beranda</a></li>
      <li><a href="/html/">HTML</a></li>
      <li><a href="/html/navigasi/">Navigasi</a></li>
      <li>Breadcrumb</li>
    </ol>
  </nav>

  <h1>Membuat Breadcrumb</h1>
  <p>Halaman latihan untuk breadcrumb HTML semantik.</p>
</main>

Ganti elemen <main> lama dalam index.html dengan potongan di atas; bagian header tetap seperti tahap sebelumnya. Setelah memuat ulang browser, hasil default biasanya berupa daftar bernomor berisi empat tingkat. Tampilan daftar bawaan belum menyerupai breadcrumb horizontal, tetapi struktur semantik adalah prioritas pada tahap ini. Verifikasi di panel Elements bahwa ol benar-benar menjadi anak dari nav dan empat li menjadi anak daftar. Jika DevTools browser menyediakan panel Accessibility, inspect elemen nav breadcrumb dan cari nama aksesibel “Breadcrumb”. Nama panel dan penyajiannya dapat berbeda antarbrowser. Periksa pula bahwa navigasi utama dan breadcrumb memiliki label berbeda. Tahap ini menunjukkan alasan aria-label: dua wilayah navigasi yang berbeda dapat mempunyai nama yang menjelaskan fungsi masing-masing.

Langkah 3

Tandai Halaman Saat Ini dengan aria-current

Item terakhir sekarang baru berupa teks biasa. Tambahkan aria-current="page" pada elemen yang mewakili halaman aktif. Dalam contoh ini kita membungkus teks “Breadcrumb” menggunakan <span>. Item tersebut sengaja tidak menggunakan <a> karena pengguna sudah berada di halaman itu. aria-current berbeda dari aria-label: yang pertama menyatakan status elemen di dalam sekumpulan item, sedangkan yang kedua menyediakan nama aksesibel. Nilai page sesuai ketika konteks aktif merupakan halaman yang sedang ditampilkan. Jangan menaruh aria-current="page" pada semua tingkat; hanya item yang benar-benar mewakili halaman saat ini yang perlu ditandai.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Beranda</a></li>
    <li><a href="/html/">HTML</a></li>
    <li><a href="/html/navigasi/">Navigasi</a></li>
    <li><span aria-current="page">Breadcrumb</span></li>
  </ol>
</nav>

Ganti blok nav breadcrumb sebelumnya dengan versi ini. Secara visual hampir tidak ada perubahan, dan itu normal: ARIA terutama mengubah informasi yang tersedia untuk accessibility API, bukan otomatis memberikan desain visual. Verifikasi pertama dapat dilakukan pada DOM dengan memastikan hanya ada satu atribut aria-current="page". Verifikasi kedua, jika DevTools Anda menyediakan accessibility tree atau properti aksesibilitas, adalah inspect span tersebut dan periksa informasi current yang diekspos browser. Screen reader juga dapat digunakan untuk pengujian tambahan, tetapi jangan mematok satu kalimat pengucapan tertentu karena output berbeda menurut kombinasi browser dan teknologi bantu. Tekan tombol Tab untuk pemeriksaan keyboard: tiga ancestor pada breadcrumb dapat menerima fokus karena berupa tautan, sedangkan teks halaman aktif tidak menjadi fokus. Itulah hasil yang diharapkan dari pola ini dan menghindari target keyboard yang tidak melakukan navigasi berguna.

Langkah 4

Tambahkan Separator Visual tanpa Mengotori Informasi Aksesibel

Daftar sudah mempunyai semantik yang tepat, tetapi separator diperlukan agar hierarki mudah dipindai secara visual. Tambahkan sebuah span berisi karakter / setelah setiap tautan ancestor. Setiap separator diberi aria-hidden="true" karena karakternya hanya membantu presentasi visual dan bukan tujuan navigasi atau nama item. Separator sengaja tidak ditambahkan setelah item terakhir. Pendekatan eksplisit ini mudah dipahami pemula karena markup yang menghasilkan separator dapat terlihat langsung. Pada proyek yang lebih besar, separator juga dapat dibuat dengan CSS, tetapi teknik tersebut bukan syarat agar konsep breadcrumb semantik bekerja.

<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="/">Beranda</a>
      <span aria-hidden="true">/</span>
    </li>
    <li>
      <a href="/html/">HTML</a>
      <span aria-hidden="true">/</span>
    </li>
    <li>
      <a href="/html/navigasi/">Navigasi</a>
      <span aria-hidden="true">/</span>
    </li>
    <li>
      <span aria-current="page">Breadcrumb</span>
    </li>
  </ol>
</nav>

Ganti breadcrumb sebelumnya dengan versi tersebut dan muat ulang halaman. Dengan gaya bawaan browser, karakter slash terlihat setelah tiga tautan meskipun item masih tersusun vertikal. Inspect salah satu separator pada panel accessibility browser. Karena aria-hidden="true", separator seharusnya tidak menjadi node informasi aksesibel yang perlu dibaca sebagai isi bermakna; detail penyajian DevTools dapat berbeda menurut browser. Jangan memindahkan aria-hidden ke li, sebab hal itu akan menyembunyikan konten item, termasuk tautannya, dari accessibility tree. Untuk verifikasi keyboard, tekan Tab dan pastikan separator sendiri tidak memperoleh fokus. Fokus hanya menuju elemen interaktif. Pada tahap ini Anda sudah memisahkan dua lapisan dengan jelas: struktur dan status dipertahankan untuk teknologi bantu, sementara simbol yang hanya berguna secara visual dikecualikan dari informasi aksesibel.

Langkah 5

Rapikan Tampilan dengan CSS tanpa Mengubah Makna HTML

Struktur yang baik seharusnya tetap dapat dipahami sebelum diberi CSS. Setelah kondisi tersebut terpenuhi, ubah daftar menjadi breadcrumb horizontal. Tambahkan elemen <style> berikut di dalam <head> file latihan, setelah elemen <title>. CSS menghapus penomoran visual bawaan ol, lalu memakai Flexbox agar item tersusun mendatar dan dapat berpindah baris jika ruang sempit. Selector hanya menggunakan elemen yang sudah ada dalam markup, sehingga tidak diperlukan class tambahan. Properti gap pada daftar memberi jarak antartingkat, sedangkan jarak pada separator memisahkan slash dari teks tautan. Tautan tetap mempunyai underline sehingga tidak hanya mengandalkan warna sebagai petunjuk interaktivitas.

<style>
  nav[aria-label="Breadcrumb"] ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  nav[aria-label="Breadcrumb"] li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  nav[aria-label="Breadcrumb"] a {
    color: #005ea8;
    text-decoration: underline;
  }

  nav[aria-label="Breadcrumb"] [aria-current="page"] {
    font-weight: 700;
  }
</style>

Simpan dan muat ulang browser. Hasil yang diharapkan adalah breadcrumb mendatar “Beranda / HTML / Navigasi / Breadcrumb”, dengan kemungkinan membungkus ke baris berikutnya jika viewport sempit. Halaman aktif ditampilkan lebih tebal. Verifikasi responsivitas dengan mempersempit viewport DevTools: item seharusnya dapat membungkus karena flex-wrap: wrap, bukan memaksa overflow hanya demi mempertahankan satu baris. Selanjutnya nonaktifkan aturan CSS sementara melalui DevTools. Breadcrumb akan kembali menyerupai daftar, tetapi urutan, tautan, landmark, dan status halaman aktif tetap ada dalam HTML. Pemeriksaan ini penting karena menunjukkan bahwa semantik tidak bergantung pada dekorasi. Setelah CSS diaktifkan kembali, coba navigasi menggunakan Tab. Tautan tetap menerima fokus sesuai mekanisme browser. Tutorial ini tidak menghapus outline fokus bawaan, sehingga browser tetap dapat menyediakan indikator fokusnya sendiri; jangan menghapus indikator tersebut tanpa membuat pengganti yang terlihat jelas.

Langkah 6

Satukan Implementasi dan Lakukan Audit Keyboard serta Accessibility Tree

Tahap terakhir adalah menyatukan kode sehingga Anda memiliki referensi file yang dapat dibuka langsung. Gunakan isi berikut sebagai versi final index.html. Tidak ada JavaScript ataupun library eksternal. URL ancestor adalah contoh jalur situs; pada proyek nyata, ganti ketiganya dengan URL yang benar-benar tersedia pada struktur situs Anda. Hal ini penting karena semantik yang benar tidak membuat target href otomatis valid. File lengkap juga memudahkan Anda membandingkan hubungan antara navigasi utama, breadcrumb, halaman aktif, dan CSS tanpa harus menggabungkan snippet secara manual.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Belajar Breadcrumb Semantik</title>
  <style>
    nav[aria-label="Breadcrumb"] ol {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    nav[aria-label="Breadcrumb"] li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    nav[aria-label="Breadcrumb"] a {
      color: #005ea8;
      text-decoration: underline;
    }

    nav[aria-label="Breadcrumb"] [aria-current="page"] {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Navigasi utama">
      <a href="/">Beranda</a>
      <a href="/html/">HTML</a>
    </nav>
  </header>

  <main>
    <nav aria-label="Breadcrumb">
      <ol>
        <li>
          <a href="/">Beranda</a>
          <span aria-hidden="true">/</span>
        </li>
        <li>
          <a href="/html/">HTML</a>
          <span aria-hidden="true">/</span>
        </li>
        <li>
          <a href="/html/navigasi/">Navigasi</a>
          <span aria-hidden="true">/</span>
        </li>
        <li>
          <span aria-current="page">Breadcrumb</span>
        </li>
      </ol>
    </nav>

    <h1>Membuat Breadcrumb</h1>
    <p>Halaman latihan untuk breadcrumb HTML semantik.</p>
  </main>
</body>
</html>

Buka atau muat ulang file, lalu lakukan audit berlapis. Secara visual harus ada navigasi utama dan breadcrumb empat tingkat. Dengan keyboard, ancestor breadcrumb menjadi target Tab, sementara separator dan item aktif bukan target fokus. Di DOM, pastikan breadcrumb menggunakan nav, satu ol, empat li, tiga tautan ancestor, tiga separator tersembunyi secara aksesibel, dan tepat satu aria-current="page". Di accessibility tree DevTools, periksa keberadaan landmark navigation bernama “Breadcrumb”; detail nama role dapat disajikan berbeda oleh masing-masing browser. Jika Anda mempunyai screen reader, gunakan sebagai pengujian tambahan untuk menavigasi landmark dan tautan, tetapi nilai struktur dan operabilitasnya, bukan satu kalimat pengucapan yang dianggap universal. Terakhir, pada situs nyata klik setiap ancestor dan verifikasi tujuan URL. Untuk file latihan lokal, jalur absolut contoh mungkin tidak mempunyai halaman tujuan lokal, jadi pemeriksaan tujuan dilakukan setelah URL disesuaikan dengan proyek Anda.

Verifikasi Akhir dan Parameter Kelayakan

Implementasi layak dipakai ketika struktur, nama landmark, status halaman, dan operabilitasnya dapat diperiksa secara independen dari desain visual. Tabel berikut menggunakan kondisi “sebelum” sebagai pola navigasi dasar yang belum mempunyai breadcrumb aksesibel, lalu menyatakan target setelah metode diterapkan. Pemeriksaan tidak bergantung pada satu merek screen reader. DOM dan accessibility tree memberikan pemeriksaan struktural, keyboard menguji fokus pada elemen interaktif, sedangkan klik atau pemeriksaan URL memvalidasi tujuan navigasi. Pada proyek nyata, pengujian dengan teknologi bantu tetap bernilai karena kombinasi browser dan screen reader dapat berperilaku berbeda.

Parameter	Sebelum Menerapkan Metode	Sesudah Menerapkan Metode (Target)
Landmark breadcrumb	Belum tersedia	Ada satu `<nav aria-label="Breadcrumb">` untuk breadcrumb
Struktur hierarki	Tautan dapat berupa deretan tanpa daftar	Empat tingkat berada dalam satu `<ol>` dengan empat `<li>`
Status halaman aktif	Tidak dinyatakan	Tepat satu item memakai `aria-current="page"`
Separator dekoratif	Dapat terbaca sebagai konten biasa	Tiga separator visual memakai `aria-hidden="true"`
Operabilitas keyboard	Belum diuji	Tiga ancestor breadcrumb dapat difokuskan sebagai tautan; separator dan halaman aktif tidak menambah target Tab

Solusi Masalah di Lapangan (FAQ Teknis)

1. Mengapa breadcrumb saya terlihat benar tetapi tidak dikenali sebagai navigasi bernama?
Penyebab yang umum adalah breadcrumb hanya menggunakan div, atau nav ada tetapi tidak mempunyai nama yang membedakannya dari navigasi lain. Periksa DOM terlebih dahulu, bukan tampilannya. Gunakan <nav aria-label="Breadcrumb"> pada kontainer breadcrumb. Anda tidak perlu menambahkan role="navigation" jika sudah memakai nav, karena semantik native telah menyediakan peran navigasi. Setelah diperbaiki, inspect elemen tersebut pada fitur accessibility browser dan periksa accessible name-nya. Nama dan lokasi panel berbeda menurut browser. Jika ada beberapa landmark navigation, beri masing-masing nama yang menjelaskan tujuannya, misalnya “Navigasi utama” dan “Breadcrumb”. Jangan memberi keduanya label sama apabila fungsi keduanya berbeda, karena tujuan label adalah membantu pengguna membedakan wilayah navigasi tersebut.

2. Mengapa separator slash ikut terdengar atau muncul sebagai informasi aksesibel?
Separator mungkin dimasukkan sebagai teks biasa tanpa pengecualian dari accessibility tree. Jika slash hanya dekoratif dan struktur daftar sudah membawa hubungan item, bungkus separator dalam <span aria-hidden="true">/</span>. Pastikan atribut tersebut berada pada separator saja, bukan pada li, tautan, atau seluruh nav. Jika ditempatkan terlalu tinggi, konten penting di dalam subtree dapat ikut hilang dari accessibility API. Inspect separator di DevTools sesudah perubahan untuk melihat bagaimana browser merepresentasikannya. Pengucapan aktual dapat berbeda di antara screen reader, sehingga pengujian sebaiknya tidak bergantung hanya pada apakah Anda mendengar karakter slash pada satu konfigurasi. Periksa juga markup hasil akhir apabila breadcrumb dihasilkan template server atau CMS, karena generator tersebut bisa menghasilkan struktur berbeda dari template yang Anda kira sedang digunakan.

3. Apakah halaman saat ini harus tetap dibuat sebagai tautan?
Tidak harus. Untuk pola dalam tutorial ini, item terakhir menggunakan teks non-link karena tautan menuju halaman yang sedang dibuka biasanya tidak menambah fungsi navigasi. Teks itu diberi aria-current="page" agar statusnya eksplisit. Jika sistem aplikasi Anda mempunyai alasan valid untuk mempertahankan item saat ini sebagai tautan, aria-current="page" juga dapat digunakan pada elemen yang sesuai dalam set tersebut; yang penting status current hanya diberikan pada item yang benar-benar aktif. Untuk implementasi tutorial, verifikasi dengan Tab: tiga ancestor menerima fokus, sedangkan item “Breadcrumb” tidak. Kemudian periksa DOM dan pastikan hanya ada satu aria-current="page". Jangan menggunakan aria-disabled sebagai pengganti hanya untuk membuat tautan tampak tidak aktif; lebih sederhana mempertahankan halaman aktif sebagai teks apabila tidak ada aksi navigasi yang dibutuhkan.

4. Mengapa link breadcrumb gagal ketika contoh dibuka langsung dari komputer?
Contoh menggunakan URL seperti /html/ dan /html/navigasi/ untuk menggambarkan struktur situs. Awalan slash berarti jalur absolut terhadap root URL. Ketika index.html dibuka melalui skema file:, lingkungan tersebut tidak sama dengan struktur server situs produksi, sehingga tujuan contoh belum tentu tersedia. Ini bukan masalah pada aria-label atau nav. Pada proyek sebenarnya, ganti href dengan URL yang cocok dengan routing atau struktur file situs Anda, lalu uji dengan mengklik setiap ancestor. Perhatikan bahwa breadcrumb sebaiknya mencerminkan hierarki informasi yang bermakna, bukan sekadar memecah URL menjadi segmen secara otomatis. Setelah link disesuaikan, verifikasi address bar atau halaman tujuan dan pastikan setiap ancestor membawa pengguna ke tingkat hierarki yang dimaksud.

Kesimpulan dan Rencana Aksi

Breadcrumb yang aksesibel dibangun dari beberapa keputusan kecil yang mempunyai peran berbeda: <nav> menyediakan semantik navigasi, aria-label="Breadcrumb" memberi nama pada landmark, <ol> dan <li> membentuk urutan tingkat, tautan menghubungkan halaman ke ancestor, dan aria-current="page" mengidentifikasi halaman saat ini. Separator visual dapat dipertahankan tanpa menjadikannya informasi aksesibel dengan menempatkan aria-hidden="true" hanya pada separator dekoratif. CSS kemudian mengubah presentasi tanpa menjadi sumber makna utama. Sebagai rencana aksi, mulai dengan menerapkan pola ini pada satu halaman yang mempunyai setidaknya dua tingkat ancestor. Sesuaikan semua href dengan struktur situs yang sebenarnya, lalu periksa DOM, urutan fokus keyboard, dan accessibility tree. Setelah pola tersebut konsisten, terapkan melalui template atau komponen yang digunakan situs agar breadcrumb tidak ditulis ulang secara berbeda pada setiap halaman. Ketika hierarki konten berubah, perbarui item dan tujuan URL bersama-sama. Jika tersedia, lengkapi pengujian dengan screen reader pada kombinasi browser dan sistem operasi yang relevan bagi pengguna Anda. Dengan proses itu, aksesibilitas diperlakukan sebagai bagian dari struktur navigasi sejak awal, bukan dekorasi yang ditambahkan setelah tampilan selesai.

Ditulis dan diedit oleh Ahmad Ismail Al Malik