Aksesibilitas Idin Cookie: Kepatuhan WCAG 2.2 kanggo Banner Idin
Banner cookie sing ora bisa ditutup dening pangguna keyboard, ora bisa diumumake dening pembaca layar, utawa ora bisa diwaca dening tamu wuta warna ora mung UX sing ala — iki kegagalan kepatuhan ing rong bidang. Wiwit Undhang-undhang Aksesibilitas Eropa berlaku ing Juni 2025, antarmuka idin ing situs web komersial sing ngladeni pangguna EU kudu netepi WCAG 2.1 Level AA, kanthi WCAG 2.2 banget disaranake kanggo 2026. Digabung karo syarat GDPR yen idin kudu "diwenehake kanthi bebas, spesifik, terinformasi, lan ora ambigu", banner sing ora aksesibel saiki nggawa eksposur hukum ganda. Pandhuan iki nerangake kanthi tepat kaya ngapa banner cookie sing sesuai WCAG ing taun 2026.
Kenapa Aksesibilitas lan Idin Saiki Tumpang Tindih
GDPR mbutuhake yen idin bisa dipikolehi saka saben pangguna, ora mung sing bisa ndeleng lan ngeklik banner. Dewan Perlindungan Data Eropa wis njelasake yen subjek data ora bisa berinteraksi kanthi bermakna karo antarmuka idin — amarga cacat sing ora diakomodasi situs — idin ora sah dipikolehi. Iku tegese cookie mau ora seharusnya dimuat wiwit kapisan.
Ing sisih aksesibilitas, Undhang-undhang Aksesibilitas Eropa (EAA) sing wis dilebokake ing hukum nasional ing saindenging Negara Anggota EU ndadekake WCAG 2.1 AA dadi minimal kanggo situs web lan aplikasi sektor swasta sing nawakake layanan konsumen. Rezim sanksi beda-beda miturut negara nanging biasane saka €50.000 nganti €500.000 saben pelanggaran, ditambah perintah penarikan pasar kanggo ketidakpatuhan sing persisten.
Syarat WCAG Inti kanggo Banner Cookie
Operabilitas Keyboard
Saben kontrol banner — Tampa, Tolak, Kelola Preferensi, tutup — kudu bisa dijangkau lan dioperasikake nggunakake keyboard wae. Pangguna kudu bisa Tab liwat tombol kanthi urutan logis lan ngaktifake kanthi Enter utawa Space. Fokus kudu katon kanthi rasio kontras minimal 3:1 marang latar mburi.
Perangkap Fokus ing Banner Modal
Yen banner ngalangi interaksi karo bagian liyane saka kaca, fokus keyboard kudu dikurung ing njero banner nganti pangguna nggawe pilihan. Pangguna ora kudu bisa Tab metu saka banner kanggo nggulung kaca sing ana ing ngisor. Nalika fokus dikurung lan banner ditutup, fokus kudu bali menyang unsur sing ngundhuh banner utawa menyang gawan sing masuk akal.
Pengumuman Pembaca Layar
Banner kudu diumumake minangka dialog kanthi jeneng lan peran sing bisa diakses. Gunakake `role="dialog"` utawa `role="alertdialog"` kanthi `aria-labelledby` nuding menyang judul banner lan `aria-describedby` nuding menyang teks penjelasan.
Kontras Warna
Teks awak kudu netepi kontras 4,5:1 marang latar mburi; teks gedhe (18pt+ utawa 14pt kandel) mbutuhake 3:1. Teks tombol, ikon, lan indikator fokus kabeh duwe minimal kontras dhewe-dhewe. Tombol "Tolak" abu-abu terang ing latar mburi putih minangka kegagalan WCAG sing kerep kita deleng ing audit.
Ora Mung Isyarat Adhedhasar Warna
Aja mung ngandelake warna kanggo mbedakake Tampa saka Tolak. Gunakake label, ikon, utawa wujud sing beda supaya pangguna wuta warna bisa mbedakake tombol-tombol kasebut.
Pola Peteng lan Aksesibilitas
WCAG 2.2 nepungake kriteria anyar sing langsung narget pola peteng — khususe relevan kanggo idin:
- 3.3.8 Otentikasi Aksesibel — nglarang teka-teki kognitif minangka gesekan idin.
- 3.3.7 Entri Redundan — pangguna ora kudu mlebu maneh informasi mung kanggo narik idin.
- 2.4.11 Fokus Ora Kasembunyi — banner dhewe ora kudu nutupi indikator fokus unsur ing mburi.
- 2.5.7 Gerakan Seret — yen bannermu nggunakake interaksi seret kanggo nampa, alternatif penunjuk tunggal kudu ana.
RTL lan Internasionalisasi
Aksesibilitas ngluwihi menyang basa kanan-ke-kiri (Arab, Ibrani, Persia, Urdu) lan pelafalan pembaca layar:
- Setel `dir="rtl"` ing banner nalika basa dokumen yaiku RTL supaya urutan tombol lan aliran fokus cocog karo arah maca.
- Gunakake atribut `lang` sing bener ing salinan banner sing diterjemahake supaya pembaca layar melafalake tembung kanthi fonetik sing tepat.
- Cerminake ikonografi — chevron, panah, lan indikator kemajuan kudu dibalik kanggo lokal RTL.
Nguji Banner kanggo Kepatuhan WCAG
Aja mung ngandelake siji alat. Gabungake pemindaian otomatis karo pengujian teknologi asistif nyata:
- axe DevTools utawa Lighthouse — nangkep kira-kira 30-40% kegagalan WCAG kanthi otomatis.
- NVDA utawa JAWS ing Windows, VoiceOver ing Mac/iOS, TalkBack ing Android — uji karo pembaca layar nyata. Apa banner bisa diumumake, diobah-obah, lan ditutup nggunakake pembaca layar wae?
- Navigasi keyboard wae — copot mousemu. Yen kowe ora bisa Nampa, Nolak, lan ngatur preferensi, pangguna keyboard uga ora bisa.
- Simulasi wuta warna — Chrome DevTools duwe simulator defisiensi penglihatan bawaan. Priksa apa Nampa lan Tolak bisa dibedakake kanthi protanopia, deuteranopia, lan tritanopia.
- Zoom nganti 400% — WCAG mbutuhake konten tetep bisa digunakake ing zoom 400% tanpa gulir horizontal. Banner posisi tetap asring gagal ing tes iki.
Kegagalan Aksesibilitas Umum sing Kita Deleng
- Tolak didhelikake ing mburi ikon roda gigi — pola peteng plus kegagalan aksesibilitas (ora ana jeneng aksesibel ing tombol ikon).
- Fokus ora tau tekan banner — banner sing nyolong perhatian visual nanging dilewati ing urutan Tab.
- Banner modal tanpa perangkap fokus — pangguna bisa tab menyang kaca latar mburi nalika banner ngaku ngalangi interaksi.
- Ora ana `aria-live` ing owahan preferensi — pangguna pembaca layar ora krungu konfirmasi yen pilihane wis disimpen.
- Banner sing diterjemahake tanpa atribut `lang` — pembaca layar melafalake salinan basa Spanyol kanthi fonetik basa Inggris.
Carane FlexyConsent Ngewenehake Aksesibilitas
FlexyConsent netepi WCAG 2.2 AA kanthi standar:
- Kabeh kontrol bisa dioperasikake keyboard kanthi indikator fokus 3:1 sing katon.
- `role="dialog"` sing tepat karo `aria-labelledby` lan `aria-describedby`.
- Perangkap fokus karo Escape-to-dismiss kanggo banner opsional.
- Kontras 4,5:1+ ing saben unsur teks, kalebu Tolak.
- Balik RTL otomatis kanggo lokal Arab, Ibrani, Persia, lan Urdu.
- Atribut `lang` disetel saben terjemahan kanggo pelafalan pembaca layar sing bener.
- Tata letak toleran zoom sing tetep bisa digunakake ing 400%.