WCAG (Web Content Accessibility Guidelines) adalah standar internasional dari W3C untuk mengukur aksesibilitas sebuah halaman, kriteria demi kriteria. Inclusive design adalah cara berpikir di balik standar itu: merancang sejak awal untuk orang yang berbeda-beda. Bayangin aturan bangunan untuk gedung umum: lebar pintu minimal sekian, kemiringan ramp maksimal sekian, tombol lift setinggi sekian. Aturan itu bisa diukur dan dicentang. Tapi arsitek yang baik gak berhenti di situ; dia juga memikirkan ibu yang mendorong kereta bayi, kurir yang membawa kardus, dan kakek yang lututnya sakit. WCAG adalah aturan bangunannya, inclusive design adalah cara berpikir arsiteknya.
🧪 Tebakan cepat: Tim Bu Sri menambah bilah setinggi 72px yang menempel di bawah layar: "2 malam · Rp 700.000" dan tombol Pesan. Bilahnya selalu terlihat, jadi tamu gak perlu menggulir untuk memesan. Kriteria WCAG 2.2 mana yang bisa dilanggarnya, dan apa perbaikan satu barisnya? Jawabannya ada di bagian "Empat kriteria baru WCAG 2.2 di halaman Bu Sri".
Empat prinsip: POUR
WCAG 2.2 (W3C Recommendation, Oktober 2023) tersusun dari 4 prinsip, 13 pedoman, dan 86 kriteria keberhasilan (success criteria). Tiap kriteria punya nomor, misalnya 1.1.1, dan bisa diuji. Empat prinsipnya disingkat POUR:
| Prinsip | Artinya | Contoh dari jalur ini |
|---|---|---|
| Perceivable | isinya bisa ditangkap indra, apa pun indra yang dipakai | alt untuk foto kamar (1.1.1), kontras 4,5:1 (1.4.3), zoom 200% (1.4.4) |
| Operable | semua bisa dioperasikan, termasuk dengan keyboard | <button>, bukan <div onclick> (2.1.1), fokus terlihat (2.4.7), target sentuh 24px (2.5.8) |
| Understandable | isi dan perilakunya bisa dipahami | lang="id" (3.1.1), label kolom (3.3.2), pesan error yang membantu (3.3.1, 3.3.3) |
| Robust | cukup kokoh untuk dibaca teknologi bantu | tiap komponen punya name dan role yang benar (4.1.2), seperti di pohon aksesibilitas |
Level A, AA, AAA
Tiap kriteria punya level: A (31 kriteria) adalah dasar yang paling minimal, AA (24 kriteria tambahan) adalah target yang biasa diminta, dan AAA (31 kriteria) yang paling ketat.
- Levelnya bertingkat. Halaman mencapai AA kalau semua kriteria A dan AA terpenuhi. Satu kriteria A yang gagal membuat halaman belum mencapai level apa pun.
- AA adalah target untuk kebanyakan situs. Aturan di banyak negara merujuk ke WCAG level AA, misalnya standar EN 301 549 di Uni Eropa (WCAG 2.1 AA). W3C sendiri gak menyarankan AAA sebagai kebijakan untuk seluruh situs, karena ada isi yang memang gak bisa memenuhi semua kriteria AAA.
- AAA tetap bisa dipakai sebagian, misalnya kontras 7:1 untuk teks penting.
Empat kriteria baru WCAG 2.2 di halaman Bu Sri
WCAG 2.2 menambah 9 kriteria dan menghapus 4.1.1 (Parsing). Empat yang baru langsung mengenai langkah "Data tamu" Bu Sri, yang sama dengan Lab di halaman ini. Kami mengujinya di layar 330 × 380px di Chromium, WebKit, dan Firefox.
| Kriteria | Level | Di halaman Bu Sri | Perbaikan |
|---|---|---|---|
| 2.4.11 Focus Not Obscured (Minimum) | AA | bilah 72px menutup kolom yang difokus | scroll-padding-bottom: 88px |
| 2.5.8 Target Size (Minimum) | AA | tombol − dan + jumlah tamu 18 × 18px, jaraknya 4px | 44 × 44px |
| 3.3.7 Redundant Entry | A | nama yang sama diketik dua kali: pemesan dan tamu yang menginap | centang "Sama dengan pemesan" |
| 3.3.8 Accessible Authentication (Minimum) | AA | kode 6 angka dari WhatsApp gak bisa ditempel | izinkan tempel, autocomplete="one-time-code" |
2.4.11. Saat sebuah komponen difokus, dia gak boleh tertutup seluruhnya oleh isi buatan halaman, seperti bilah yang menempel. Tanpa perbaikan, Tab membuat kolom Nomor WhatsApp tertutup penuh di Chromium dan WebKit (di Firefox, kolom Catatan), dan kolom lain tertutup sebagian: browser cuma menggulir sampai kolomnya masuk layar, tanpa tahu ada bilah di situ. W3C menyebut teknik C43, scroll-padding:
html { scroll-padding-bottom: 88px; } /* bilah 72px + 16px */
scroll-padding-bottom memberi tahu browser bahwa 88px terbawah layar bukan tempat untuk menaruh elemen yang sedang dituju. Dengan baris itu, gak ada kolom yang tertutup penuh di ketiga browser. WebKit masih menyisakan sebagian kolom Catatan di bawah tepi bilah; itu lolos 2.4.11, tapi gagal 2.4.12 (Enhanced, AAA), yang gak mengizinkan bagian apa pun tertutup. Jadi jawaban tebakannya: 2.4.11, dan perbaikannya scroll-padding-bottom setinggi bilah plus sedikit ruang. Itu jawaban tebakannya.
2.5.8. Target untuk jari atau mouse minimal 24 × 24 CSS px. Target yang lebih kecil masih lolos kalau lingkaran berdiameter 24px yang dipusatkan di tiap target gak saling bertumpuk. Tombol tamu 18px dengan jarak 4px punya pusat yang cuma 22px berjauhan, jadi lingkarannya bertumpuk: gagal. Dibuat 44 × 44px (seukuran saran Apple), lolos tanpa hitungan jarak.
3.3.7. Info yang sudah diisi di proses yang sama gak boleh diminta diketik ulang; isi otomatis atau sediakan untuk dipilih. Kecualinya: ketik ulang yang memang penting (misalnya konfirmasi kata sandi), untuk keamanan, atau info lama yang sudah gak berlaku.
3.3.8. Proses masuk gak boleh mewajibkan cognitive function test, seperti mengingat kata sandi atau menyalin kode, kecuali ada bantuan. Penjelasan W3C untuk kriteria ini bilang layanan yang mewajibkan kode verifikasi disalin dengan tangan gak memenuhi kriteria; tamu setidaknya harus bisa menempel kode itu, dan browser harus dibiarkan mengisinya otomatis. Halaman yang membatalkan event paste gagal di sini.
Inclusive design: mulai dari orang yang berbeda
WCAG memberi batas bawah yang bisa diukur. Inclusive design bertanya: siapa yang belum terpikir? Microsoft Inclusive Design Toolkit membagi keterbatasan jadi tiga: permanen (satu lengan), sementara (lengan patah), dan situasional (menggendong bayi). Solusi untuk satu orang sering membantu banyak orang. Tiga tamu Bu Sri:
- Pak Hadi (58). Matanya mulai rabun dekat dan jarinya kurang presisi. Dia memperbesar halaman 200% (1.4.4), butuh halaman yang tetap utuh di lebar 320px (1.4.10), dan target yang besar (2.5.8). Target 44px juga menolong tamu yang memesan sambil berdiri di angkot.
- Tamu dengan HP murah dan sinyal lemah di Dieng. Ini bukan kriteria WCAG, tapi tetap soal bisa dipakai atau gak. Di pelajaran image optimization, LCP halaman ini turun dari 4,19 detik ke 1,11 detik di jaringan 1,6 Mbps cuma dengan AVIF dan lazy loading untuk galeri.
- Wisatawan yang membaca dalam bahasa Inggris.
lang="id"di halaman (3.1.1),lang="en"di bagian berbahasa Inggris (3.1.2), dan kalimat pendek yang jelas, seperti "Gratis batal sampai 3 hari sebelum check-in.", lebih mudah dipahami pembaca bahasa kedua.
Cara mengeceknya: jalani halaman cuma dengan Tab, zoom ke 200%, buka di lebar 320px, dan coba dengan screen reader sungguhan. Alat otomatis seperti axe dan Lighthouse membantu, tapi cuma menemukan sebagian masalah; ada pelajaran tersendiri untuk itu nanti.
⚠️ Jebakan yang sering ketemu
- Mengejar AAA untuk seluruh situs. W3C sendiri gak menyarankannya. Targetkan AA, lalu pakai kriteria AAA di tempat yang penting.
- Menganggap AA tercapai karena kebanyakan kriteria lolos. Satu kriteria A atau AA yang gagal sudah cukup untuk gak mencapai AA.
- Bilah, banner cookie, atau header yang menempel tanpa scroll-padding. Fokus keyboard bisa hilang di belakangnya (2.4.11).
- Memblokir tempel di kolom kode atau kata sandi. Itu memaksa tamu menyalin dengan tangan (3.3.8).
- Aksesibilitas sebagai tugas terakhir sebelum rilis. Bilah yang menempel lebih murah diperbaiki di desain daripada setelah dikodekan.
TL;DR: WCAG 2.2 (W3C, 2023) punya 4 prinsip POUR: Perceivable (bisa ditangkap indra), Operable (bisa dioperasikan, termasuk keyboard), Understandable (bisa dipahami), Robust (bisa dibaca teknologi bantu), dengan 13 pedoman dan 86 kriteria. Level: A (dasar, 31), AA (24 tambahan, target untuk kebanyakan situs dan yang dirujuk aturan seperti EN 301 549), AAA (31, paling ketat, gak disarankan untuk seluruh situs); levelnya bertingkat, satu kriteria A gagal berarti belum A. Kriteria baru 2.2 di halaman Bu Sri: 2.4.11 (fokus gak tertutup penuh: scroll-padding-bottom setinggi bilah), 2.5.8 (target minimal 24 × 24px atau lingkaran 24px yang gak bertumpuk), 3.3.7 (jangan minta mengetik ulang: "Sama dengan pemesan"), 3.3.8 (jangan wajibkan menyalin kode dengan tangan: izinkan tempel dan autocomplete="one-time-code"). Inclusive design memikirkan keterbatasan permanen, sementara, dan situasional: Pak Hadi yang zoom 200%, tamu dengan HP murah dan sinyal lemah, wisatawan yang membaca dalam bahasa Inggris. Cek dengan Tab, zoom, lebar 320px, dan screen reader sungguhan.
