Intinya...

Pengguna harus dapat melewati blok konten yang sama (misalnya navigasi, header) dan lompat langsung ke bagian utama halaman.

Apa itu WCAG 2.4.1?

Pengguna yang bergantung pada teknologi bantu, seperti screen reader dan navigasi keyboard, bisa kesulitan dengan konten yang berulang yang membuat konten utama sulit dijangkau. Ini bisa mencakup elemen seperti menu navigasi, kolom pencarian, banner, iklan, dll.

Meskipun memiliki konten berulang di seluruh halaman web bisa diterima atau bahkan diharapkan, kamu juga harus memperhatikan bahwa beberapa pengguna akan merasa terbantu jika dapat melewati blok-blok tersebut. Sebagai contoh, sebuah template bagian judul yang diterapkan pada semua halaman situs, atau sidebar navigasi yang berulang di seluruh blog.

Tujuan dari kriteria ini adalah untuk membantu pengguna melewati bagian-bagian atau blok konten yang berulang di situs web dan memudahkan mereka untuk mengakses konten utama di halaman.

Halaman web dengan blok konten berulang

Halaman web yang menampilkan blok konten berulang standar, termasuk header navigasi, gambar banner, iklan, dan kolom pencarian.

Mengapa ini penting?

Memberikan opsi bagi pengguna untuk melewati blok konten membantu pengguna yang mengandalkan teknologi bantu untuk dengan cepat mengakses konten utama dari sebuah halaman web. Tanpa kemampuan untuk melewati ke konten utama, pengguna mungkin merasa frustrasi atau menganggap situs web tidak dapat digunakan, mengingat betapa merepotkannya jika harus melewati setiap bagian pada setiap halaman.

Pengguna non-disabilitas seringkali terbiasa untuk mengabaikan konten di web dan bisa dengan cepat menggulir melewati bagian yang ingin diabaikan untuk sampai ke bagian utama. Namun, bagi beberapa pengguna, bagian konten yang berulang bisa menjadi hal yang membosankan, bahkan sangat membingungkan atau melelahkan ketika harus mencari cara untuk melewati bagian navigasi yang sama berulang kali di setiap halaman.

Siapa yang terpengaruh?

Pengguna dengan mobilitas terbatas, pengguna low vision, dan pengguna netra.

Pengguna dengan mobilitas terbatas yang mengandalkan navigasi keyboard mungkin merasa kesulitan menavigasi blok konten yang berulang, mengingat banyaknya langkah tambahan yang diperlukan untuk mencapai konten utama di setiap halaman. Bagi sebagian pengguna, banyaknya langkah tambahan ini bisa sangat melelahkan dan menyebabkan kelelahan ekstra.

Pengguna low vision dan penglihatan terbatas yang menggunakan pembesaran layar mungkin kesulitan menemukan di mana konten utama dimulai. Ketika halaman diperbesar dengan tingkat pembesaran yang tinggi, pengguna seringkali harus menghabiskan lebih banyak waktu untuk memilah-milah blok konten yang berulang untuk memposisikan diri mereka dan mencari tahu di mana bagian utama berada.

Pengguna netra dan yang mengandalkan screen reader akan merasa ini sangat membantu karena mereka bisa menghindari mendengar pengulangan heading, tautan navigasi, alternatif berupa teks, tombol, dll, di setiap halaman sebelum mendengarkan konten utama. Bayangkan mendengar 200 kata yang sama berulang kali setiap kali membuka halaman baru hanya untuk mencapai konten, pasti sangat mengganggu!

Cara menerapkan WCAG 2.4.1

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

Tautan untuk melewati blok konten yang berulang

Ada beberapa cara berbeda untuk mengimplementasikan "skip links" atau tautan melewati bagian. Setiap kasus akan berbeda, tetapi kamu dapat menggunakan teknik berikut sesuai kebutuhan.

Tautan "skip" sebaiknya selalu terlihat untuk semua pengguna. Namun, untuk memenuhi kriteria ini, tautan hanya perlu terlihat ketika pengguna memberikan fokus keyboard langsung pada tautan tersebut.

Dalam semua kasus, deskripsi dari setiap tautan harus mengkomunikasikan bahwa tautan tersebut menuju ke bagian tertentu dari konten.

Tautan melewati konten utama

Item pertama yang dapat diklik di halaman haruslah tautan yang langsung memindahkan fokus ke konten utama. Ini sangat berguna pada halaman dengan satu area konten utama dan sedikit bagian navigasi.

Daftar isi halaman

Opsi lain adalah membuat daftar tautan di awal halaman, mirip seperti daftar isi mini, yang memungkinkan pengguna melompat ke berbagai bagian di halaman tersebut. Teknik ini paling cocok digunakan ketika ada banyak bagian terpisah yang sama pentingnya dengan konten utama.

Melewati konten tertentu

Teknik ini membantu pengguna melewati bagian konten yang berulang di halaman web. Tautan di awal setiap blok atau tepat sebelum blok tersebut memungkinkan pengguna melompat ke konten yang ada setelah blok tersebut. Ini sangat membantu ketika perlu melewati blok yang ada dalam konten utama atau setelahnya.

Contoh penerapan lewati blok

Sebuah halaman web menawarkan tautan 'skip' di bagian paling awal halaman. Sebuah tanda panah menunjuk ke konten utama untuk menandakan bahwa tautan tersebut akan memindahkan fokus ke bagian tersebut setelah diklik.

Tag HTML

Menggunakan tag HTML untuk mengimplementasikan landmark adalah cara terbaik untuk membantu pengguna membedakan bagian-bagian halaman dengan teknologi bantu. Tag HTML semantik seperti <header>, <nav>, <main>, <aside>, dan <footer> secara jelas mendefinisikan struktur dan tujuan berbagai bagian halaman web.

Ini memastikan bahwa screen reader dan teknologi bantu lainnya dapat menyampaikan tata letak dan hirarki dengan akurat kepada pengguna, membuat navigasi menjadi lebih intuitif. Ini memungkinkan pengguna untuk dengan mudah menemukan dan melompat ke konten utama, menu navigasi, dan bagian penting lainnya dari halaman.

Landmark ARIA

Perlu dicatat bahwa ARIA bukanlah metode aksesibilitas yang biasanya disarankan. Sebagai gantinya, teknik ini harus digunakan sebagai pelengkap bagi teknik yang lebih disukai seperti yang tercantum di atas, yang dikombinasikan dengan struktur semantik yang tepat dalam HTML seperti penggunaan heading, daftar, dan tombol yang dapat diakses dengan benar.

Dalam hal ini, kamu menggunakan landmark ARIA untuk menandai bagian-bagian yang berbeda sehingga pengguna dapat dengan mudah melompat ke area utama dari sebuah halaman. Misalnya, kamu dapat memberikan atribut role tertentu pada bagian-bagian tertentu untuk memberi mereka landmark ARIA seperti “navigation”, “banner”, “search”, dan yang paling penting, “main” untuk konten utama halaman.

<div role="main">The page's main content is here.</div>

Heading bagian

Teknik ini menggunakan heading bagian (section) untuk mengorganisir konten dengan jelas. Heading harus membantu pengguna menemukan awal dari konten utama, bagian unik, dan area navigasi. Heading yang terstruktur dengan benar (misalnya, <h2> di bawah<h1>) menciptakan hierarki logis dan memungkinkan pengguna alat bantu teknologi untuk melompat ke heading dengan cepat.

Menggunakan title dengan elemen iframe

Ketika elemen <iframe> yang mungkin berisi iklan berulang digunakan, tag <iframe> perlu menerima atribut title yang deskriptif. Dengan begitu, setiap <iframe> diberi label, dan pengguna dapat menentukan iframe mana yang akan dimasuki atau dilewati.

<iframe src="banner-ad.html" name="ad-iframe" title="Advertisement"></iframe>

Menu yang dapat di-collapse dan di-expand

Teknik ini membantu pengguna melewati konten yang berulang dengan menempatkannya dalam menu yang dapat di-collapse atau di-expand. Pengguna dapat menyembunyikan materi yang berulang dengan meng-collapse menu. Ada beberapa cara untuk membuat menu yang memungkinkan pengguna melewati navigasi; namun, untuk memenuhi kriteria, hal berikut harus dipastikan:

  • Pastikan ada kontrol untuk memperluas atau melipat konten yang berulang.
  • Pastikan konten yang diperluas muncul di tempat yang benar dalam urutan bacaan.
  • Ketika di-collapse, konten tersebut harus dikeluarkan dari urutan bacaan.

Kesimpulan

Memudahkan pengguna untuk melewati konten berulang membantu semua orang, terutama mereka yang memiliki disabilitas, mengakses informasi utama di halaman dengan cepat. Teknik seperti skip links, mini tables of contents, dan menu yang dapat dilipat dapat memberikan perbedaan besar.