Apa yang Berubah di WCAG 2.2 dibandingkan WCAG 2.1

Web Content Accessibility Guidelines (WCAG) adalah standar yang dirujuk oleh sebagian besar undang-undang aksesibilitas. WCAG 2.2 menjadi Rekomendasi W3C pada 5 Oktober 2023, menambahkan sembilan kriteria sukses baru, dan menghapus satu. Kini juga ISO/IEC 40500:2025. Jika Anda memelihara situs web, design system, atau produk pada tahun 2026, pertanyaan praktisnya adalah: apa yang berubah, apa yang sebenarnya diminta oleh setiap kriteria baru, dan bagaimana Anda harus memprioritaskan perbaikan? Tulisan ini menjawab masing-masing secara bergantian, dengan sumber yang dikutip agar Anda dapat memverifikasi sebelum bertindak.

Sejarah singkat WCAG

W3C menerbitkan Web Content Accessibility Guidelines pertama pada 5 Mei 1999. WCAG 1.0 bersifat preskriptif dan khusus HTML; ia cepat menjadi usang ketika web bergerak dari dokumen sederhana menuju aplikasi yang kaya.

WCAG 2.0 hadir pada 11 Desember 2008. Ia mengabstraksikan panduan dari teknologi tertentu, mengaturnya di bawah empat prinsip "Dapat Dirasakan, Dapat Dioperasikan, Dapat Dipahami, Robust" (POUR), dan memperkenalkan skema kesesuaian tiga tingkat A/AA/AAA yang masih digunakan praktisi hingga kini. Ini adalah versi yang dirujuk oleh sebagian besar regulasi AS dan internasional pada awalnya.

WCAG 2.1 menyusul pada 5 Juni 2018. Ia menambahkan 17 kriteria sukses baru yang mencakup mobile (orientasi, target sentuh, aktuasi gerak), pengguna dengan penglihatan rendah (reflow, jarak teks, kontras non-teks), dan aksesibilitas kognitif (label-in-name, pesan status). Ini adalah versi yang tertanam dalam standar EN 301 549 v3.2.1 yang dirujuk oleh European Accessibility Act.

WCAG 2.2 diterbitkan pada 5 Oktober 2023 dan diterbitkan ulang dengan pembaruan editorial pada 12 Desember 2024. Ia menambahkan sembilan kriteria sukses baru, menghapus satu (4.1.1 Parsing), dan kini juga ISO/IEC 40500:2025. WCAG 3, kerangka yang secara substansial berbeda dengan skor baru, masih dalam draft dan tidak diperkirakan untuk adopsi umum sebelum 2027.

Sembilan kriteria sukses baru

Kriteria baru terbagi dalam tiga kelompok tematik: fokus, modalitas masukan, dan aksesibilitas kognitif.

Kelompok fokus

2.4.11 Fokus Tidak Terhalangi (Minimum), Level AA. Ketika komponen antarmuka pengguna menerima fokus keyboard, komponen tersebut tidak boleh sepenuhnya disembunyikan oleh konten yang dibuat pembuat (header lengket, banner cookie, widget chat). Komponen boleh sebagian terhalang; kriteria hanya gagal ketika tidak ada bagiannya yang terlihat. Sebagian besar kegagalan di lapangan datang dari bilah bawah lengket yang mengapung di atas masukan yang difokuskan dalam formulir, membuat fokus tidak terlihat saat pengguna mengetik.

2.4.12 Fokus Tidak Terhalangi (Ditingkatkan), Level AAA. Versi 2.4.11 yang lebih ketat: ketika komponen menerima fokus, tidak ada bagian darinya yang boleh disembunyikan. Ini adalah versi AAA yang ditargetkan oleh sebagian besar design system perusahaan.

2.4.13 Penampilan Fokus, Level AAA. Indikator fokus sendiri harus setebal setidaknya 2 piksel CSS di sekitar kontrol yang difokuskan, dan kontras indikator fokus terhadap keadaan tidak difokuskan yang berdekatan harus setidaknya 3:1. Cincin fokus default browser 1-piksel pada tombol gelap tidak memenuhi kriteria ini; cincin kontras tinggi 2-piksel memenuhinya.

Kelompok modalitas masukan

2.5.7 Gerakan Seret, Level AA. Apa pun yang dapat dilakukan dengan gerakan seret juga harus mungkin tanpanya. Contoh: daftar yang dapat diurutkan yang hanya merespons seret, slider yang hanya merespons seret, panning peta yang membutuhkan seret. Kriteria tidak melarang seret; ia mengharuskan alternatif seperti panah atas/bawah untuk menata ulang, atau bidang input teks untuk nilai slider.

2.5.8 Ukuran Target (Minimum), Level AA. Target penunjuk harus setidaknya 24 kali 24 piksel CSS, kecuali jika inline (tautan dalam paragraf), terpapar dalam default user-agent (seperti dropdown <select>), esensial untuk fungsi (simulator fretboard), atau memiliki kontrol setara di tempat lain pada halaman yang memenuhi 24x24. Kriteria WCAG 2.1 sebelumnya 2.5.5 menetapkan ambang pada 44x44 tetapi pada Level AAA; 2.5.8 menjadikan minimum lebih kecil 24x24 wajib pada AA.

Kelompok aksesibilitas kognitif

3.2.6 Bantuan Konsisten, Level A. Jika mekanisme bantuan (tautan "Hubungi kami", widget chat, tautan bantuan, nomor telepon bantuan) muncul di beberapa halaman, mereka harus muncul dalam urutan relatif yang sama di setiap halaman. Maksudnya adalah menurunkan beban kognitif: pengguna menemukan bantuan di tempat yang mereka harapkan, setiap kali.

3.3.7 Entri Berulang, Level A. Pengguna tidak boleh diharuskan memasukkan kembali informasi yang sudah mereka masukkan dalam proses yang sama. Formulir multi-langkah harus mengingat masukan sebelumnya. Kriteria tidak melarang permintaan ulang ketika esensial (verifikasi keamanan) atau ketika informasi telah berubah.

3.3.8 Autentikasi yang Dapat Diakses (Minimum), Level AA. Autentikasi tidak boleh mensyaratkan tes fungsi kognitif seperti mengingat kata sandi, memecahkan teka-teki, atau menyalin CAPTCHA berbasis gambar, kecuali alternatif disediakan. Alternatif yang dapat diterima termasuk pengelola kata sandi, kode sekali pakai, biometrik, atau token perangkat keras. Inilah kriteria yang mengakhiri pola "ketik huruf dari gambar ini" untuk situs yang dapat diakses.

3.3.9 Autentikasi yang Dapat Diakses (Ditingkatkan), Level AAA. Versi lebih kuat: teka-teki pengenalan objek dan konten pribadi (gambar mana yang berisi bus?, siapa nama hewan peliharaan pertama Anda?) juga tidak diperbolehkan, kecuali alternatif disediakan.

Satu kriteria yang dihapus

4.1.1 Parsing ditarik karena usang. Ia mensyaratkan konten dapat di-parse: tag awal/akhir lengkap, tidak ada ID duplikat, elemen ter-nest dengan benar. Pada 2008 hal ini penting karena teknologi bantu mem-parse HTML sendiri dan akan gagal pada markup yang tidak teratur. Pada 2024 setiap teknologi bantu mengonsumsi accessibility tree browser, bukan HTML mentah; browser sudah pulih dari markup yang tidak teratur dengan anggun. WCAG 2.2 mengakui ini dengan menghapus kriteria. Ia masih muncul dalam kesesuaian WCAG 2.0 dan 2.1, tetapi tidak dalam 2.2.

Ini adalah satu-satunya kriteria yang pernah dihapus dari WCAG. Audit 2.0 / 2.1 yang ada yang menandai kegagalan 4.1.1 harus diuji ulang terhadap 2.2; beberapa kegagalan tersebut kini bukan lagi masalah.

Ringkasan level kesesuaian

WCAG 2.2 menambahkan 4 kriteria Level A atau AA (2.5.7, 2.5.8, 2.4.11, 3.2.6, 3.3.7, 3.3.8) dan 4 kriteria Level AAA (2.4.12, 2.4.13, 3.3.9, ditambah cabang AAA dari 2.4.11). Untuk sebagian besar pekerjaan kesesuaian hukum, fokuslah dulu pada penambahan AA.

Dampak praktis, apa yang diperbaiki dulu

Untuk situs umum yang sudah sesuai dengan WCAG 2.1 AA, gap 2.2 AA biasanya:

1. 2.5.8 Ukuran Target (Minimum), 24x24 piksel CSS. Audit tombol, tautan ikon, dan toggle kecil Anda. Kontrol yang lebih kecil dari 24x24 membutuhkan area sentuh yang lebih besar, lebih banyak jarak di sekitarnya, atau kontrol setara yang lebih besar pada halaman. Ini adalah kegagalan 2.2 tunggal yang paling umum pada situs yang ada.
2. 2.4.11 Fokus Tidak Terhalangi (Minimum). Cari bilah bawah lengket, footer lengket, widget chat, banner cookie yang menumpuk di bagian bawah viewport. Ketika elemen yang dapat difokuskan menggulir di balik salah satunya, kriteria gagal. Perbaiki dengan menambahkan scroll-margin-bottom pada elemen yang dapat difokuskan sama dengan tinggi bilah lengket.
3. 3.3.8 Autentikasi yang Dapat Diakses (Minimum). Hapus CAPTCHA berbasis gambar dari alur login; ganti dengan pendekatan CAPTCHA tak terlihat atau yang dibatasi laju. Izinkan pengelola kata sandi (jangan menonaktifkan autocomplete pada bidang kata sandi). Izinkan tempel kode sekali pakai.
4. 2.5.7 Gerakan Seret. Sediakan alternatif tanpa-seret untuk setiap interaksi yang hanya-seret. Daftar yang dapat diurutkan membutuhkan panah atas/bawah; slider membutuhkan masukan angka; peta membutuhkan tombol pan.
5. 3.2.6 Bantuan Konsisten. Jika tautan "Kontak" atau "Bantuan" muncul di beberapa halaman, posisikan secara konsisten. Sebagian besar situs sudah melakukan ini; kegagalannya ada pada situs yang memindahkan tautan bantuan berdasarkan jenis halaman.
6. 3.3.7 Entri Berulang. Formulir multi-langkah harus mengingat masukan sebelumnya. Sebagian besar kerangka modern sudah melakukannya jika Anda menghubungkan state dengan benar; kegagalannya ada pada formulir multi-halaman lawas yang me-reset state antar langkah.

Jebakan umum dalam mengimplementasikan kriteria baru

• Menganggap 4.1.1 Parsing sudah hilang di mana-mana. 4.1.1 dihapus dari WCAG 2.2 tetapi masih diperlukan oleh WCAG 2.0 dan 2.1. Jika kontrak atau regulasi Anda menentukan 2.1, aturan parsing masih berlaku.
• Salah membaca 2.5.8 Ukuran Target. Minimum 24x24 untuk target, bukan untuk ikon yang terlihat. Ikon 16x16 di dalam tombol 24x24 lolos. Ikon 16x16 di dalam tombol 16x16 gagal.
• Melupakan pengecualian 2.5.8. Tautan inline di paragraf, kontrol default user-agent, target esensial, dan kontrol setara yang lebih besar di tempat lain pada halaman semuanya dikecualikan.
• Mengimplementasikan 3.3.8 dengan menghapus semua CAPTCHA. Anda dapat mempertahankan CAPTCHA; Anda hanya perlu jalur alternatif yang dapat diakses. Reverse Turing test, rate limit, magic link, passkey, atau token perangkat keras semuanya memenuhi syarat.
• 2.4.11 dikacaukan dengan 2.4.13. Fokus Tidak Terhalangi (2.4.11) adalah tentang apakah elemen yang difokuskan terlihat sama sekali. Penampilan Fokus (2.4.13) adalah tentang indikator fokus sendiri yang harus tebal dan kontras. Itu adalah persyaratan yang berbeda pada level yang berbeda.
• Melewati 2.4.13 karena itu AAA. Beberapa pemerintah (Norwegia, sebagian Kanada) telah mengadopsi aturan tingkat AAA untuk situs sektor publik. Periksa yurisdiksi Anda.

Alat untuk memeriksa kesesuaian WCAG 2.2

Beberapa alat telah diperbarui untuk menguji kriteria 2.2 baru; yang lain masih menguji hanya terhadap 2.0 / 2.1.

Alat otomatis menangkap kira-kira 30 hingga 40% kegagalan WCAG bahkan pada kondisi terbaik. Kriteria 2.2 baru sangat sulit diotomatisasi (2.5.7 Seret, 3.2.6 Bantuan Konsisten, 3.3.7 Entri Berulang, 3.3.8 Autentikasi) karena membutuhkan pemahaman alur pengguna, bukan hanya markup. Rencanakan pengujian keyboard manual pada setiap rilis.

Privasi dan alat

Color contrast checker, WCAG heading checker, dan accessible palette generator di Absolutool semuanya berjalan sepenuhnya di browser Anda. Nilai HTML atau warna yang Anda tempel diproses oleh JavaScript di perangkat Anda, hasilnya ditampilkan ke halaman, dan tidak ada yang dikirim ke server. Tidak ada telemetri pada masukan, tidak ada skrip pihak ketiga yang menyentuh konten, tidak ada cache setelah navigasi. Untuk audit design system internal, warna merek yang belum dirilis, atau data audit apa pun di bawah embargo, alur khusus-lokal itu adalah default yang tepat. Alat dapat berjalan offline setelah halaman dimuat, yang dapat Anda verifikasi dengan mematikan jaringan dan memeriksa ulang pasangan kontras.