WCAG 2.2 untuk Website Bisnis yang Lebih Mudah Digunakan

Coba isi form kontak dengan satu tangan sambil berdiri di kendaraan yang bergerak. Coba baca teks abu-abu di bawah matahari. Coba selesaikan checkout saat koneksi lambat atau layar retak. Situasi ini bukan pengganti pengalaman penyandang disabilitas, tetapi cukup untuk menunjukkan satu hal: kemampuan kita menggunakan website berubah-ubah, dan desain yang rapuh cepat sekali menjadi penghalang.

WCAG 2.2 mengelompokkan panduan accessibility dalam empat prinsip: perceivable, operable, understandable, dan robust. Di balik istilah itu ada pertanyaan sehari-hari. Apakah informasi bisa ditangkap selain lewat warna? Apakah semua fungsi bisa dipakai dengan keyboard? Apakah error menjelaskan cara memperbaikinya? Apakah markup dapat dipahami teknologi bantu?

Mulai dari tugas, bukan skor audit

Audit otomatis berguna untuk menemukan masalah seperti contrast, label, atau atribut yang hilang. Namun, alat tidak tahu apakah urutan fokus masuk akal, apakah copy error membantu, atau apakah modal membuat pengguna keyboard terjebak. Pilih beberapa tugas utama—mencari layanan, mengisi form, membeli produk, mengunduh dokumen—lalu uji dari awal sampai selesai.

1. Gunakan Tab dan Shift+Tab. Fokus harus terlihat dan bergerak mengikuti urutan yang logis.

2. Perbesar halaman sampai 200 persen. Konten penting tidak boleh hilang atau saling menimpa.

3. Matikan gambar atau dengarkan halaman dengan screen reader untuk menilai struktur dan alternatif teks.

4. Picu semua error form. Pesannya harus menunjuk field, menjelaskan masalah, dan tidak hanya berubah warna merah.

5. Uji di layar sentuh kecil. Target interaktif perlu cukup besar dan tidak terlalu rapat.

Photo by Jonas Leupe on Unsplash

Perceivable: jangan sembunyikan makna

Gambar informatif membutuhkan alt text yang menjelaskan fungsinya, sedangkan gambar dekoratif sebaiknya tidak mengganggu screen reader. Video membutuhkan caption. Status “berhasil” atau “gagal” tidak boleh mengandalkan hijau dan merah saja. Contrast yang cukup membantu pengguna low vision, tetapi juga siapa pun yang memakai layar di kondisi terang.

Operable: setiap jalur harus bisa dilalui

Dropdown yang hanya terbuka saat hover, carousel tanpa kontrol keyboard, dan dialog yang tidak mengembalikan fokus adalah contoh kecil yang dapat menghentikan tugas sepenuhnya. Sediakan kontrol yang jelas, hormati prefers-reduced-motion, dan jangan mematikan zoom. Website tidak perlu terlihat identik dalam setiap mode; yang penting fungsi dan informasinya tetap tersedia.

Understandable dan robust: kurangi kejutan

Label yang konsisten, bahasa yang langsung, dan perubahan konteks yang dapat diprediksi mengurangi beban kognitif. Di sisi teknis, gunakan elemen HTML sesuai fungsinya sebelum membuat tiruan dengan div. Button yang benar, heading berurutan, label yang terhubung ke input, serta status yang diumumkan dengan tepat memberi browser dan assistive technology informasi yang mereka butuhkan.

Accessibility bukan proyek amal dan bukan mode khusus. Ia adalah bagian dari quality assurance untuk beragam cara manusia menggunakan produk digital.

Cara memulai tanpa membuat tim kewalahan

• Tetapkan baseline pada komponen yang dipakai berulang: button, form, dialog, navigasi, dan tabel.

• Masukkan keyboard test dan pengecekan contrast ke definition of done.

• Perbaiki blocker pada tugas bernilai tinggi lebih dulu, lalu susun backlog untuk sisanya.

• Libatkan pengguna penyandang disabilitas saat memungkinkan; pengalaman langsung tidak dapat digantikan checklist.

• Uji ulang setelah redesign atau perubahan library, karena regresi accessibility mudah muncul.

Hasil akhirnya biasanya menguntungkan semua orang: struktur lebih jelas, form lebih tenang, copy lebih membantu, target sentuh lebih nyaman, dan frontend lebih mudah dipelihara. Kepatuhan memang penting, tetapi alasan terbaik tetap sederhana—orang datang untuk menyelesaikan sesuatu, dan website seharusnya tidak menambah hambatan yang tidak perlu.

Ringkasan prinsip dan tautan ke kriteria lengkap tersedia di W3C: WCAG 2 at a Glance.