Mengapa Kebolehcapaian dan Keizinan Kini Bertindih

GDPR memerlukan keizinan boleh diperoleh daripada setiap pengguna, bukan hanya mereka yang boleh melihat dan mengklik banner. Lembaga Perlindungan Data Eropah telah menjelaskan bahawa jika subjek data tidak dapat berinteraksi secara bermakna dengan antara muka keizinan — kerana ketidakupayaan yang tidak diakomodasi oleh laman web — keizinan tidak diperoleh secara sah. Ini bermakna kuki sepatutnya tidak pernah dimuatkan dari awal.

Dari segi kebolehcapaian, Akta Kebolehcapaian Eropah (EAA) yang ditransposisikan ke dalam undang-undang negara di seluruh Negara Anggota EU menjadikan WCAG 2.1 AA sebagai minimum untuk laman web dan aplikasi sektor swasta yang menawarkan perkhidmatan pengguna. Rejim penalti berbeza mengikut negara tetapi biasanya berkisar antara €50,000 hingga €500,000 setiap pelanggaran, ditambah perintah penarikan pasaran untuk ketidakpatuhan berterusan.

Keperluan WCAG Teras untuk Banner Kuki

Kebolehkendalian Papan Kekunci

Setiap kawalan banner — Terima, Tolak, Urus Keutamaan, tutup — mesti boleh dicapai dan dikendalikan dengan papan kekunci sahaja. Pengguna harus dapat menggunakan Tab untuk menavigasi antara butang dalam urutan logik dan mengaktifkannya dengan Enter atau Space. Fokus mesti kelihatan dengan nisbah kontras minimum 3:1 terhadap latar belakang.

Perangkap Fokus dalam Banner Modal

Jika banner menghalang interaksi dengan selebihnya halaman, fokus papan kekunci mesti dirangkap di dalam banner sehingga pengguna membuat pilihan. Pengguna tidak sepatutnya dapat menggunakan Tab untuk keluar dari banner untuk menatal halaman asas. Apabila fokus telah dirangkap dan banner ditutup, fokus harus kembali ke elemen yang mencetuskan banner atau ke lalai yang munasabah.

Pengumuman Pembaca Skrin

Banner mesti diumumkan sebagai dialog dengan nama dan peranan yang boleh dicapai. Gunakan `role="dialog"` atau `role="alertdialog"` dengan `aria-labelledby` menunjuk ke tajuk banner dan `aria-describedby` menunjuk ke teks penjelasan.

Kontras Warna

Teks badan mesti memenuhi kontras 4.5:1 terhadap latar belakang; teks besar (18pt+ atau 14pt tebal) memerlukan 3:1. Teks butang, ikon, dan penunjuk fokus semuanya mempunyai minimum kontras tersendiri. Butang "Tolak" kelabu muda pada latar belakang putih adalah kegagalan WCAG yang kerap kami lihat dalam audit.

Tiada Isyarat Warna Sahaja

Jangan bergantung semata-mata pada warna untuk membezakan Terima daripada Tolak. Gunakan label, ikon, atau bentuk yang berbeza supaya pengguna dengan buta warna dapat membezakan butang.

Corak Gelap dan Kebolehcapaian

WCAG 2.2 memperkenalkan kriteria baru yang secara langsung menyasar corak gelap — terutama relevan untuk keizinan:

• 3.3.8 Pengesahan Boleh Capaian — melarang teka-teki kognitif sebagai geseran keizinan.
• 3.3.7 Kemasukan Berulang — pengguna tidak seharusnya perlu memasukkan semula maklumat hanya untuk menarik balik keizinan.
• 2.4.11 Fokus Tidak Terhalang — banner itu sendiri tidak seharusnya menghalang penunjuk fokus elemen di belakangnya.
• 2.5.7 Pergerakan Seret — jika banner anda menggunakan interaksi seret-untuk-terima, alternatif penunjuk tunggal mesti wujud.

RTL dan Pengantarabangsaan

Kebolehcapaian meliputi bahasa kanan-ke-kiri (Arab, Ibrani, Parsi, Urdu) dan sebutan pembaca skrin:

• Tetapkan `dir="rtl"` pada banner apabila bahasa dokumen adalah RTL supaya susunan butang dan aliran fokus sepadan dengan arah bacaan.
• Gunakan atribut `lang` yang betul pada salinan banner yang diterjemahkan supaya pembaca skrin menyebut perkataan dengan fonetik yang betul.
• Cerminkan ikonografi — chevron, anak panah, dan penunjuk kemajuan harus dibalikkan untuk lokasi RTL.

Menguji Banner Anda untuk Pematuhan WCAG

Jangan bergantung pada satu alat sahaja. Gabungkan pengimbasan automatik dengan ujian teknologi bantuan sebenar:

• axe DevTools atau Lighthouse — menangkap kira-kira 30–40% kegagalan WCAG secara automatik.
• NVDA atau JAWS pada Windows, VoiceOver pada Mac/iOS, TalkBack pada Android — uji dengan pembaca skrin sebenar. Adakah banner boleh diumumkan, dinavigasi, dan ditutup menggunakan pembaca skrin sahaja?
• Navigasi papan kekunci sahaja — cabut tetikus anda. Jika anda tidak dapat Terima, Tolak, dan urus keutamaan, pengguna papan kekunci pun tidak boleh.
• Simulasi buta warna — Chrome DevTools mempunyai simulator kecacatan penglihatan terbina dalam. Semak sama ada Terima dan Tolak boleh dibezakan di bawah protanopia, deuteranopia, dan tritanopia.
• Zum ke 400% — WCAG memerlukan kandungan kekal boleh digunakan pada zum 400% tanpa menatal mendatar. Banner dengan kedudukan tetap sering gagal ujian ini.

Kegagalan Kebolehcapaian Biasa Yang Kami Lihat

• Tolak tersembunyi di sebalik ikon gear — corak gelap ditambah kegagalan kebolehcapaian (tiada nama boleh capaian pada butang ikon).
• Fokus tidak pernah mencapai banner — banner yang mencuri perhatian visual tetapi dilangkau dalam urutan Tab.
• Banner modal tanpa perangkap fokus — pengguna boleh melayari halaman latar belakang semasa banner mendakwa menghalang interaksi.
• Tiada `aria-live` pada perubahan keutamaan — pengguna pembaca skrin tidak mendengar pengesahan bahawa pilihan mereka telah disimpan.
• Banner diterjemahkan tanpa atribut `lang` — pembaca skrin menyebut salinan bahasa Sepanyol dengan fonetik bahasa Inggeris.

Bagaimana FlexyConsent Menyampaikan Kebolehcapaian