Intinya...

Elemen dengan fungsi yang sama harus memiliki tampilan, fungsi, dan label yang konsisten di setiap halaman.

Apa itu WCAG 3.2.4?

Bayangkan sedang menjelajahi sebuah toko online yang setiap tombol untuk menambah barang ke keranjang memiliki nama yang berbeda. Terkadang itu “Tambahkan ke Keranjang”, lain waktu “Tambahkan ke Tas”, dan di tempat lain malah “Beli Sekarang”. Itu pasti membingungkan, kan?

Kriteria ini memastikan bahwa elemen-elemen interaktif seperti tombol, tautan, dan kontrol form diberi label secara konsisten di seluruh situs web. Jika sesuatu melakukan tindakan yang sama di beberapa halaman, itu harus selalu diidentifikasi dengan cara yang sama. Dengan begitu, pengguna dapat dengan mudah memprediksi apa yang akan terjadi ketika mereka berinteraksi dengan elemen tersebut.

Kriteria kesuksesan ini sangat terkait dengan WCAG 1.1.1 Konten Non-Teks, yang memastikan elemen-elemen memiliki alternatif berupa teks, dan WCAG 4.1.2 Nama, Role, Value, yang memastikan bahwa teknologi bantu dapat mengidentifikasi dan berinteraksi dengan elemen dengan benar. Namun, WCAG 3.2.4 hanya fokus pada menjaga konsistensi label, nama, dan alternatif berupa teks untuk elemen yang melakukan hal yang sama di halaman yang berbeda.

Konten atau komponen interaktif yang sering dipakau berulang kali di halaman web meliputi:

  • Tombol: Kirim, Tambahkan ke Keranjang, Bagikan ke Sosial, Putar/Jeda Media, dll.
  • Ikon: Cetak, Simpan, Unduh, Sampah, dll.
  • Paginasi: Pergi ke Halaman 3, Halaman Sebelumnya, dll.
  • Tautan Call-to-Action: Pelajari Lebih Lanjut, Daftar, Mulai, dll.
  • Breadcrumbs
  • Tab dan akordeon
  • Label formulir

Mengapa ini penting?

Ketika elemen interaktif mengubah nama di seluruh halaman, hal itu bisa membingungkan, terutama bagi mereka yang bergantung pada teknologi bantu, pembesar layar, atau pola pengenalan kognitif.

Misalnya, bayangkan seorang pengguna menemukan tombol "Tambahkan ke Keranjang" di halaman produk topi. Ketika berbelanja untuk kaos, mereka akan berharap tombol tersebut tetap bertuliskan "Tambahkan ke Keranjang". Tetapi, jika tiba-tiba tombol itu bertuliskan "Beli Sekarang" atau "Tambahkan ke Tas Belanja", mereka mungkin harus berhenti dan mencari tahu apakah tombol itu melakukan hal yang sama.

Inkonsistensi seperti ini memperlambat pengguna dan membuat situs web lebih sulit digunakan, terutama bagi:

  • Pengguna screen reader yang bergantung pada nama elemen yang konsisten untuk menemukan elemen dengan cepat.
  • Pengguna dengan disabilitas kognitif, hambatan bahasa, atau tantangan literasi yang mungkin kesulitan mengenali istilah baru.
  • Pengguna pembesar layar yang bergantung pada pengenalan pola dan memori untuk bernavigasi dengan efisien.

Siapa yang terpengaruh?

Pengguna low vision atau memiliki penglihatan terbatas, pengguna dengan disabilitas kognitif, pengguna dengan hambatan bahasa dan literasi, pengguna netra, dan pengguna yang bergantung pada teknologi bantu.

Pengguna low vision atau memiliki penglihatan terbata dapat bergantung pada pembesar layar dan mengandalkan pola yang mudah dikenali di seluruh halaman.

Pengguna dengan disabilitas kognitif atau hambatan bahasa atau literasi mungkin kesulitan untuk mengingat atau memproses istilah baru, dan jika tombol atau tautan mengganti nama, hal ini bisa membingungkan dan membuat frustasi.

Pengguna netra kemungkinan besar mengandalkan screen reader untuk berinteraksi dengan situs web. Jika sebuah tombol bertuliskan “Tambah ke Keranjang” di satu halaman tetapi “Beli Sekarang” di halaman lain, mereka harus mencari tahu apakah itu melakukan hal yang sama, yang menyebabkan pekerjaan yang tidak perlu.

Pengguna yang bergantung pada teknologi bantu membutuhkan nama yang jelas dan dapat diprediksi untuk menavigasi situs. Mengubah label atau alternatif berupa teks dapat memperlambat mereka dan membuat tugas menjadi lebih sulit daripada yang seharusnya.

Cara menerapkan WCAG 3.2.4

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

Pertahankan konsistensi label dan nama di seluruh halaman

Jika sebuah tombol, tautan, atau ikon melakukan hal yang sama di beberapa halaman, ia harus selalu diidentifikasi dengan cara yang sama.

Label harus konsisten, tetapi tidak selalu identik. Variasi kecil diperbolehkan selama tetap jelas. Misalnya, tombol penomoran halaman bisa menggunakan label “Ke halaman 2”, “Ke halaman 3”, dst., alih-alih hanya “Halaman Berikutnya”. Keseluruhan kata bisa berubah, tetapi pola yang dapat diprediksi tetap ada.

Contoh label dan nama yang tidak konsisten di seluruh halaman adalah sebagai berikut:

  • Kontak Kami → Hubungi Kami
  • Beranda → Halaman Utama
  • Bagikan → Sebarkan
  • Cari → Temukan
  • Alamat Email → Alamat Surel
  • Berlangganan → Daftar Newsletter

Contoh buruk nama dan value yang tidak konsisten

Contoh buruk dari tombol, ikon, formulir, dan CTA yang nama dan value-nya tidak konsisten antar halaman web.

Kesimpulan

Konsistensi mengurangi kebingungan dan mempermudah navigasi bagi semua pengguna. Ketika elemen interaktif diberi label dengan cara yang sama di seluruh situs web, pengguna dapat mengandalkan istilah yang sudah dikenal untuk menavigasi dengan cepat dan efisien tanpa perlu menebak-nebak.