Intinya...

Pengguna harus mengetahui lokasi dia berada dalam serangkaian halaman (misal menggunakan breadcrumb, item menu yang disorot, atau heading).

Apa itu WCAG 2.4.8?

Pengguna harus selalu tahu di mana posisi mereka dalam sebuah situs web atau kumpulan halaman. Ini membantu mereka mengenali lokasi dan menavigasi dengan percaya diri.

Indikator lokasi yang dapat membantu memenuhi kriteria keberhasilan meliputi:

  • Breadcrumbs (jejak navigasi)
  • Penanda pada menu navigasi
  • Peta situs web
  • Daftar isi mini

Peta sebuah situs web

Sebuah visual bergaya diagram alur menunjukkan struktur situs web Aardvarks Are Awesome, bercabang dari halaman utama ke berbagai kategori dan subhalaman. Ikon pin besar dengan label 'You Are Here' menunjuk ke bagian 'Photo Gallery' untuk menunjukkan lokasi saat ini.

Mengapa ini penting?

Situs web kadang bisa besar dan rumit, dan tanpa penanda lokasi, pengguna dengan disabilitas kognitif bisa merasa bingung atau kehilangan arah.

Penanda lokasi memberikan konteks pada setiap halaman di situs web. Mereka menunjukkan bagaimana satu halaman terkait dengan keseluruhan situs dan cara untuk kembali atau menjelajahi konten terkait tanpa tersesat.

Siapa yang terpengaruh?

Pengguna dengan disabilitas kognitif, dan pengguna yang mudah kehilangan fokus.

Pengguna dengan disabilitas kognitif mungkin kesulitan memahami bagaimana suatu halaman masuk dalam gambaran besar tanpa petunjuk navigasi atau konteks yang jelas.

Pengguna yang mudah kehilangan fokus bisa dengan mudah lupa di mana mereka berada di sebuah situs, apalagi jika mereka klik dengan cepat atau mudah teralihkan.

Secara umum, kriteria ini membantu siapa saja yang tiba di halaman dalam dari hasil pencarian. Seseorang yang tiba di halaman yang dalam mungkin bertanya: Di mana saya? Bagaimana saya sampai di sini? Apa lagi yang ada di sekitar? Penanda lokasi yang jelas mengurangi kebingungan dan membantu mereka memutuskan langkah selanjutnya.

Cara menerapkan WCAG 2.4.8

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Berikan setiap halaman minimal satu penanda lokasi

Gunakan petunjuk navigasi yang menunjukkan posisi halaman saat ini dalam struktur situs kamu. Ada beberapa cara untuk melakukannya, yang penting setiap halaman di situs web menggunakan minimal satu metode berikut dan konsisten supaya sesuai dengan WCAG 3.2.3 Navigasi Konsisten.

Breadcrumb

Breadcrumb atau jejak navigasi menunjukkan jalur dari halaman utama atau induk grup halaman terkait menuju halaman saat ini. Ini membantu pengguna melacak kembali dan memahami struktur situs web.

Contohnya:
Home > Services > Web Design

Breadcrumb harus menyertakan tautan ke semua halaman dalam jalur tersebut, kecuali halaman saat ini; judul halaman saat ini tidak perlu ditautkan. Gunakan juga pemisah visual, seperti >, », |, atau → untuk memperjelas.

Seekor aardcark dan breadcrumb

Seekor aardvark kartun mengikuti jejak remah roti menuju potongan roti yang patah. Di bawah remah-remah tersebut ada navigasi bergaya breadcrumb: 'Homepage > Diet and Eating Habits > What Aardvarks Eat'. Setiap tautan dirancang dengan jelas menunjukkan lokasi pengguna saat ini.

Penanda navigasi

Sorot atau tandai halaman yang sedang aktif di menu atau tab. Ini membantu pengguna tahu posisi mereka dan bagian mana yang sedang mereka lihat. Kamu bisa gunakan gaya CSS, ikon, atau teks seperti “You are here.”

Cara mudah untuk melakukannya adalah dengan membuat kelas CSS .active untuk menata tautan halaman saat ini di navigasi. Kemudian, tambahkan kelas ini menggunakan JavaScript pada elemen <a> yang sesuai di HTML agar link halaman aktif terlihat menonjol.

3

Jendela browser menampilkan situs web Aardvarks Are Awesome! dengan menu sidebar di kiri. Bagian Aardvark Gallery terbuka, dan Photo Gallery disorot dengan warna biru sebagai indikasi halaman saat ini. Area konten utama menampilkan beberapa foto aardvark.

Peta situs

Peta situs yang terstruktur dengan baik membantu pengguna memahami hubungan antar halaman. Mereka bisa melihat posisi mereka dan konten di sekitarnya tanpa hanya mengandalkan menu.

Untuk memenuhi kriteria ini dengan peta situs, pastikan tautan ke peta situs tersedia di setiap halaman. Saat menampilkan peta situs:

  • Semua tautan dalam peta situs harus benar dan menuju halaman yang tepat
  • Setiap halaman di situs harus termasuk dalam peta situs, atau setidaknya dapat dijangkau melalui tautan yang dimulai dari peta situs

Contoh peta situs

Halaman peta situs menampilkan tautan yang dapat diklik, dikelompokkan berdasarkan bagian-bagian situs.

Judul halaman atau heading

Judul halaman bisa menyertakan petunjuk konteks, seperti “Bagian 2 dari 4: Informasi Pengiriman” atau “Dukungan > Alat Aksesibilitas.” Ini membantu pengguna memahami posisi halaman dalam proses atau bagian yang lebih besar.

Jika kamu menggunakan metode ini, pastikan judul halaman jelas mencerminkan hubungan halaman tersebut dengan bagian lain dari situs atau kumpulan konten. Kamu bisa menampilkannya secara visual di judul halaman, atau secara programatik menggunakan metadata atau atribut HTML seperti rel untuk menunjukkan hubungan halaman dengan halaman lain. Ini membantu pengguna lebih mudah orientasi dan memahami bagaimana halaman saat ini terhubung dengan halaman lain di sekitarnya.

Kesimpulan

Membantu pengguna mengerti posisi mereka di situsmu mengurangi kebingungan, terutama bagi yang memiliki disabilitas kognitif atau rentan kehilangan fokus. Sedikit konteks saja sudah sangat membantu agar pengguna tidak tersesat.