Cara membaca WCAG 2.2 untuk situs Anda sendiri, perbaikan yang mencakup sebagian besar kegagalan dunia nyata, uji manual 30 menit yang bisa dijalankan siapa pun, dan bagaimana aksesibilitas dan kegunaan tumpang tindih.
Pertanyaan yang sering diajukan
Apa artinya website patuh WCAG?
Artinya situs memenuhi kriteria sukses Web Content Accessibility Guidelines pada tingkat yang dipilih, biasanya WCAG 2.1 atau 2.2 level AA. Level AA mencakup setiap kriteria level A dan AA. Sebagian besar hukum dan kebijakan pengadaan yang merujuk WCAG meminta level AA.
Bagaimana saya harus menafsirkan panduan WCAG untuk situs saya?
Mulai dengan referensi cepat 'How to Meet WCAG' W3C, filter ke level A dan AA, dan untuk setiap kriteria baca halaman 'Understanding', yang menjelaskan maksudnya dalam bahasa sederhana. Lalu uji templat kunci Anda (beranda, halaman konten, formulir, checkout) alih-alih setiap halaman secara individual.
Bisakah overlay atau plugin aksesibilitas membuat situs saya patuh?
Tidak ada alat yang bisa membuat situs patuh dengan sendirinya. Overlay yang menambah toolbar tidak memperbaiki kode yang mendasarinya, dan banyak pengguna disabilitas dan spesialis aksesibilitas melaporkan mereka justru menghalangi. Perbaiki HTML, kontras, label dan dukungan keyboard secara langsung.
Apa perbedaan antara kegunaan dan aksesibilitas?
Aksesibilitas berarti orang dengan disabilitas bisa memahami, mengerti, menavigasi dan berinteraksi dengan situs. Kegunaan berarti situsnya mudah dan efisien untuk semua orang. Mereka tumpang tindih besar: label jelas, kontras baik dan navigasi yang bisa diprediksi membantu semua pengunjung, bukan hanya yang disabilitas.
Apakah pemeriksa otomatis menemukan semua masalah aksesibilitas?
Tidak. Alat seperti WAVE, axe dan Lighthouse menangkap masalah seperti alt text yang hilang, kontras rendah dan label yang hilang, tapi banyak kriteria, seperti apakah alt text bermakna atau apakah urutan fokus masuk akal, butuh manusia untuk memeriksa.
Website patuh WCAG memenuhi Web Content Accessibility Guidelines pada tingkat yang dipilih, dan untuk hampir setiap bisnis itu berarti WCAG 2.2 level AA. Dalam praktik, sebagian besar situs gagal pada beberapa isu yang sama: kontras warna rendah, alt text gambar hilang, field formulir tanpa label, tautan dan tombol kosong, dan hal yang tidak bisa Anda jangkau dengan keyboard. Perbaiki itu dan uji dengan keyboard dan screen reader, dan Anda sudah mencakup bagian besar dari apa yang dihadapi pengguna nyata.
Panduan ini menjelaskan cara membaca WCAG tanpa tersesat, perbaikan yang paling penting, dan uji 30 menit yang bisa Anda lakukan sendiri.
Bagaimana WCAG terstruktur
WCAG dipublikasikan oleh W3C. Ini diorganisasi dalam lapisan:
Empat prinsip, dikenal sebagai POUR: konten harus Perceivable (bisa dirasakan), Operable (bisa dioperasikan), Understandable (bisa dimengerti) dan Robust (kuat).
Panduan di bawah setiap prinsip (misalnya, "Text Alternatives" atau "Keyboard Accessible").
Kriteria sukses di bawah setiap panduan. Ini aturan yang bisa diuji, masing-masing bernomor (seperti 1.4.3 Contrast) dan diberi tingkat: A, AA atau AAA.
Level A adalah minimum. Level AA adalah target umum untuk persyaratan hukum dan pengadaan. Level AAA lebih ketat dan biasanya tidak diwajibkan untuk seluruh situs.
WCAG 2.2 menjadi Rekomendasi W3C pada Oktober 2023. Ini menambah kriteria seperti ukuran target minimum, fokus tidak terhalang, dan autentikasi yang bisa diakses, dan menghapus 4.1.1 Parsing sebagai usang.
Cara menafsirkan WCAG untuk situs Anda sendiri
Spesifikasinya terbaca seperti standar, karena memang begitu. Cara praktis melewatinya:
Buka "How to Meet WCAG (Quick Reference)" W3C.
Filter ke level A dan AA saja.
Untuk setiap kriteria, baca halaman "Understanding" yang tertaut. Ini menjelaskan maksudnya dalam bahasa sederhana, dengan contoh lolos dan gagal.
Alih-alih menguji setiap halaman, uji templat Anda: beranda, halaman konten standar, post blog, formulir, halaman produk atau checkout. Memperbaiki templat memperbaiki setiap halaman yang dibangun di atasnya.
Catat setiap masalah dengan nomor kriteria, halaman, dan seperti apa perbaikannya.
Perbaikan yang mencakup sebagian besar kegagalan nyata
1. Kontras warna (1.4.3 dan 1.4.11)
Teks normal: setidaknya 4,5:1 terhadap latar belakangnya.
Teks besar (sekitar 24px reguler, atau 18,66px bold dan lebih besar): setidaknya 3:1.
Komponen antarmuka dan grafik bermakna (border tombol, garis luar input, ikon yang menyampaikan informasi): setidaknya 3:1.
Teks placeholder abu-abu muda dan teks putih pada warna merek pucat adalah penyebab umum. Periksa dengan contrast checker WebAIM atau dev tools browser Anda.
2. Alternatif teks untuk gambar (1.1.1)
Gambar informatif mendapat alt text yang mendeskripsikan yang penting: alt="Teknisi mengganti filter tungku".
Gambar dekoratif mendapat alt kosong: alt="", sehingga screen reader melewatinya.
Gambar teks (screenshot selebaran, menu sebagai JPG) butuh teks yang sama tersedia sebagai teks nyata.
Gambar bertautan, seperti logo yang mengarah ke beranda, mendeskripsikan tujuannya: alt="Beranda Acme Plumbing".
3. Label dan error formulir (1.3.1, 3.3.1, 3.3.2)
Setiap input butuh <label> terlihat yang tertaut ke sana. Teks placeholder bukan label: ia menghilang saat Anda mengetik.
Pesan error mengatakan apa yang salah dan cara memperbaikinya ("Masukkan nomor telepon dengan kode area"), dalam teks, bukan hanya border merah.
Field wajib ditandai dalam teks atau dengan indikator yang bisa diakses, bukan hanya warna.
4. Akses keyboard (2.1.1, 2.4.3, 2.4.7)
Setiap tautan, tombol, menu dan kontrol formulir harus berfungsi dengan Tab, Shift+Tab, Enter dan Space.
Urutan fokus mengikuti urutan visual.
Indikator fokus yang terlihat menunjukkan di mana Anda berada. Menghapus outline browser dengan outline: none tanpa pengganti adalah kegagalan umum.
Menu dropdown dan modal harus terbuka, berfungsi dan tertutup dari keyboard, dan modal harus menjaga fokus di dalam sampai tertutup.
5. Tautan dan tombol dengan nama (2.4.4, 4.1.2)
Tombol hanya-ikon (menu hamburger, kaca pembesar pencarian, ikon sosial) butuh nama yang bisa diakses, lewat teks terlihat, aria-label atau teks tersembunyi.
Hindari halaman penuh tautan "Klik di sini" dan "Baca lebih lanjut". Buat teks tautan mendeskripsikan tujuannya, atau beri masing-masing nama yang bisa diakses berbeda.
6. Struktur dan heading (1.3.1, 2.4.6)
Satu <h1> per halaman yang mendeskripsikan halamannya.
Heading dalam urutan logis (h2 untuk bagian, h3 di dalamnya), bukan dipilih untuk ukuran font.
Gunakan list nyata, tabel dengan sel header, dan landmark (<header>, <nav>, <main>, <footer>).
Atur bahasa halaman: <html lang="id">.
7. Baru di WCAG 2.2, layak diketahui
2.5.8 Target Size (Minimum), AA: target yang bisa diklik setidaknya 24 kali 24 piksel CSS, atau cukup jarak di sekitar yang lebih kecil.
2.4.11 Focus Not Obscured (Minimum), AA: header sticky, banner cookie dan widget chat tidak boleh sepenuhnya menyembunyikan elemen yang difokuskan.
3.3.8 Accessible Authentication (Minimum), AA: jangan mewajibkan menyelesaikan teka-teki atau mengingat informasi untuk login tanpa alternatif; izinkan pengelola kata sandi dan paste.
3.3.7 Redundant Entry, A: jangan membuat orang mengetik ulang informasi yang sudah mereka berikan dalam proses yang sama.
8. Media dan gerakan
Video butuh caption (1.2.2); video prarekam butuh deskripsi audio atau alternatif teks untuk konten visual penting.
Apa pun yang bergerak otomatis lebih dari lima detik butuh cara menjedanya (2.2.2).
Hormati pengaturan prefers-reduced-motion untuk animasi besar.
Uji manual 30 menit
Alat otomatis hanya menangkap sebagian gambarannya. Tambahkan rutinitas ini untuk setiap templat kunci.
Menit 0 hingga 5: pindai otomatis. Jalankan WAVE (ekstensi browser) atau axe DevTools, atau bagian aksesibilitas Lighthouse. Perbaiki error jelas seperti alt hilang, label hilang dan kegagalan kontras.
Menit 5 hingga 15: hanya keyboard. Singkirkan mouse. Tab melewati halaman dari atas.
Bisakah Anda melihat di mana fokus berada setiap saat?
Bisakah Anda membuka dan menutup menu, memakai setiap field formulir dan submit?
Apakah ada tautan "Skip to content", dan apakah berfungsi?
Apakah fokus pernah menghilang di belakang header sticky atau banner?
Menit 15 hingga 25: screen reader. Gunakan VoiceOver (bawaan macOS dan iOS) atau NVDA (gratis di Windows).
Dengarkan daftar heading-nya. Apakah itu mendeskripsikan halamannya?
Tab ke gambar dan tombol. Apakah masuk akal di luar konteks?
Isi formulirnya. Apakah setiap field diumumkan dengan labelnya? Apakah error diumumkan?
Menit 25 hingga 30: zoom dan reflow. Zoom browser ke 200% lalu 400%. Pada 400%, konten harus reflow ke satu kolom tanpa scroll horizontal (1.4.10 Reflow), dan tidak ada yang boleh terpotong.
Tumpang tindih kegunaan dan aksesibilitas
Orang yang mencari "kegunaan aksesibilitas web" benar mengelompokkan mereka. Hampir setiap perbaikan aksesibilitas adalah perbaikan kegunaan:
Perbaikan aksesibilitas
Siapa lagi yang terbantu
Kontras kuat
Siapa pun di ponsel di bawah sinar matahari
Label terlihat
Siapa pun yang mengisi formulir terburu-buru
Caption
Orang yang menonton dengan suara mati
Dukungan keyboard
Power user, orang dengan trackpad rusak
Target ketuk lebih besar
Semua orang di mobile
Pesan error yang jelas
Semua orang yang salah ketik
Overlay, pernyataan dan hukum
Overlay: widget yang menjanjikan kepatuhan satu baris tidak mengubah kode dasar Anda. Perbaiki situsnya sendiri.
Pernyataan aksesibilitas: publikasikan halaman singkat yang menyatakan standar mana yang Anda targetkan, masalah yang diketahui, dan cara menghubungi Anda untuk bantuan atau format alternatif.
Konteks hukum: persyaratan bervariasi menurut negara. European Accessibility Act berlaku untuk banyak produk dan layanan di UE sejak Juni 2025; di AS, ADA sering diterapkan ke website; badan sektor publik sering punya aturan spesifik. Dapatkan nasihat hukum untuk situasi Anda.
Daftar periksa
[ ] Kontras: 4,5:1 teks, 3:1 teks besar dan bagian UI
[ ] Alt text pada gambar informatif, alt kosong pada yang dekoratif
[ ] Setiap input punya label terlihat dan tertaut
[ ] Seluruh situs berfungsi dengan keyboard dengan fokus terlihat
[ ] Tombol ikon punya nama yang bisa diakses
[ ] Heading dan landmark logis, bahasa halaman diatur
[ ] Target ketuk setidaknya 24 kali 24 piksel CSS
[ ] Caption pada video, kontrol jeda pada gerakan
[ ] Reflow pada zoom 400%
[ ] Pernyataan aksesibilitas dipublikasikan
Aksesibilitas juga mendukung pencarian: heading, alt text dan tautan deskriptif juga dasar SEO on-page, dibahas di daftar periksa SEO on-page kami.
We.Inc menghasilkan situs sebagai kode HTML, CSS dan React standar yang bisa Anda edit langsung, sehingga Anda bisa memperbaiki label, alt text dan kontras sendiri atau minta perubahan di chat. Selalu jalankan pemeriksaan manual di atas pada apa pun yang Anda terbitkan.