Apa Itu Aksesibilitas Web? WCAG dan Desain Inklusif Dijelaskan
Aksesibilitas web berarti membangun situs dan aplikasi web agar penyandang disabilitas bisa menggunakannya — baik mereka tunanetra dan memakai screen reader, tidak bisa memakai mouse, memiliki penglihatan rendah atau buta warna, tunarungu, atau memiliki disabilitas kognitif atau belajar. Dalam praktiknya, ini mencakup hal-hal seperti teks alternatif untuk gambar, kontras warna yang cukup, formulir dengan label yang benar, dan semuanya bisa dijalankan hanya dengan keyboard. Standar internasionalnya adalah WCAG, Web Content Accessibility Guidelines dari W3C.
Aksesibilitas sering disingkat a11y — "a", lalu 11 huruf, lalu "y".
Mengapa aksesibilitas penting saat membangun dengan AI
AI builder pandai menghasilkan aplikasi yang terlihat benar. Aksesibilitas sebagian besar menyangkut hal yang tidak terlihat di tangkapan layar: apakah tombol benar-benar tombol, apakah input memiliki label yang bisa diumumkan screen reader, apakah menu bisa dicapai dengan tombol Tab.
Itulah sebabnya penting untuk bertanya:
- Mudah terlewat. Dropdown dengan gaya kustom bisa terlihat sempurna tetapi mustahil dipakai tanpa mouse. Anda tidak akan menyadarinya kecuali mengujinya.
- Lebih murah jika dibenahi sejak awal. Meminta komponen yang aksesibel sejak prompt pertama hampir tidak memakan biaya. Memperbaiki aplikasi yang sudah jadi berarti menyentuh setiap layar.
- Membantu semua orang. Caption membantu orang di tempat bising, kontras yang baik membantu orang yang memakai ponsel di bawah sinar matahari, dan label yang jelas membantu semua orang mengisi formulir lebih cepat.
- Tumpang tindih dengan SEO. Heading yang tepat, tautan yang deskriptif, dan alt text juga membantu mesin pencari memahami halaman Anda — lihat SEO untuk situs yang dibangun dengan AI.
- Mungkin diwajibkan. Bergantung pada tempat Anda beroperasi dan siapa yang Anda layani, aksesibilitas bisa menjadi kewajiban hukum.
Analogi sehari-hari
Bayangkan pintu masuk sebuah gedung.
Tangga cocok untuk banyak orang. Jalur landai cocok untuk pengguna kursi roda — dan juga untuk orang tua yang membawa kereta bayi, pekerja pengiriman dengan troli, dan pelancong dengan koper. Pintu otomatis, papan petunjuk yang jelas, huruf braille pada tombol lift, dan pencahayaan yang baik masing-masing menghilangkan satu hambatan bagi seseorang.
Aksesibilitas web adalah ide yang sama untuk ruang digital: jalur landai, papan petunjuk, dan pegangan tangga untuk aplikasi Anda. Dan seperti gedung, jauh lebih mudah memasukkan jalur landai dalam rancangan daripada menambahkannya setelah beton mengeras.
WCAG secara ringkas
WCAG diterbitkan oleh Web Accessibility Initiative milik W3C. Versi terbaru adalah WCAG 2.2, pertama kali terbit pada Oktober 2023. Standar ini kompatibel ke belakang: konten yang memenuhi WCAG 2.2 juga memenuhi 2.1 dan 2.0, dan W3C menganjurkan penggunaan versi terbaru. WCAG 2.2 juga disahkan sebagai standar internasional, ISO/IEC 40500:2025. WCAG 3 yang sangat berbeda sedang dikembangkan sebagai draf awal, bukan standar yang sudah final.
WCAG disusun dalam empat prinsip, yang sering diingat sebagai POUR:
| Prinsip | Artinya | Contoh |
|---|---|---|
| Perceivable (Dapat Dipersepsi) | Orang bisa menangkap konten dengan indera yang mereka gunakan | Alt text untuk gambar, caption untuk video, kontras yang cukup |
| Operable (Dapat Dioperasikan) | Orang bisa memakai kontrol dan bernavigasi | Akses keyboard, tidak ada batas waktu yang tidak bisa diperpanjang, fokus yang terlihat |
| Understandable (Dapat Dipahami) | Konten dan perilaku masuk akal | Label yang jelas, pesan error yang membantu, navigasi yang konsisten |
| Robust (Kokoh) | Berfungsi dengan berbagai browser dan teknologi asistif | Elemen HTML yang tepat, nama dan peran yang benar untuk kontrol |
Setiap pedoman memiliki kriteria keberhasilan yang dapat diuji di tiga level:
- Level A — minimum. Gagal memenuhi ini sepenuhnya memblokir sebagian orang.
- Level AA — target standar, dan level yang paling banyak dirujuk oleh hukum dan kebijakan.
- Level AAA — level tertinggi. Berguna untuk dikejar di beberapa tempat, tetapi W3C tidak merekomendasikan untuk mewajibkannya bagi seluruh situs, karena sebagian konten tidak bisa memenuhinya.
WCAG 2.2 menambahkan sembilan kriteria keberhasilan ke 2.1, termasuk Target Size (Minimum) pada level AA — target yang bisa diklik sebaiknya minimal 24 x 24 piksel CSS, dengan beberapa pengecualian — dan Accessible Authentication (Minimum), yang membatasi langkah login yang mengandalkan ingatan atau teka-teki, misalnya harus mengetik ulang kata sandi tanpa diizinkan menempelkannya. Kriteria "Parsing" yang lama juga dihapus karena sudah usang.
Contoh kerja: formulir pendaftaran
Berikut formulir pendaftaran yang mungkin dibuat AI, dan apa yang ditemukan pemeriksaan aksesibilitas:
| Masalah | Yang terdampak | Perbaikan |
|---|---|---|
| Input memakai teks placeholder ("Email") alih-alih label | Pengguna screen reader; siapa pun yang lupa fungsi kolom setelah mulai mengetik | Label yang terlihat dan terhubung ke setiap input dengan <label> |
| Teks abu-abu terang di atas putih, jauh di bawah kontras 4,5:1 | Orang dengan penglihatan rendah, siapa pun di luar ruangan | Teks yang lebih gelap dan memenuhi rasio kontras 4,5:1 |
| Error hanya ditampilkan sebagai garis tepi merah | Pengguna buta warna, pengguna screen reader | Pesan teks di samping kolom, diumumkan ke screen reader |
"Daftar" adalah <div> bergaya, bukan <button> | Pengguna keyboard dan screen reader tidak bisa mengaktifkannya | Gunakan elemen <button> yang sebenarnya |
| Tidak ada outline yang terlihat saat menekan Tab di antara kolom | Pengguna keyboard kehilangan posisi mereka | Gaya fokus yang jelas |
| Gambar logo tidak memiliki alt text | Pengguna screen reader hanya mendengar nama file | Alt text seperti "Acme Bookings" |
Tidak ada perbaikan ini yang banyak mengubah tampilan formulir. Namun semuanya mengubah apakah sebagian orang bisa memakainya sama sekali.
Istilah kunci
| Istilah | Artinya |
|---|---|
| Screen reader | Perangkat lunak yang membacakan layar dengan suara atau ke display braille, seperti VoiceOver, NVDA, atau JAWS. |
| Alt text | Deskripsi teks dari gambar, dibacakan oleh screen reader. Gambar dekoratif diberi alt text kosong agar dilewati. |
| Contrast ratio (rasio kontras) | Seberapa berbeda warna teks dan latar, dari 1:1 hingga 21:1. |
| Keyboard navigation | Menggunakan situs dengan tombol Tab, Enter, Spasi, dan panah, bukan mouse. |
| Focus indicator | Outline yang terlihat yang menunjukkan elemen mana yang sedang dipilih keyboard. |
| Semantic HTML | Menggunakan elemen yang tepat untuk tugasnya — <button>, <nav>, <h2> — agar browser dan teknologi asistif memahami halaman. |
| ARIA | Atribut tambahan yang mendeskripsikan kontrol kustom kepada teknologi asistif. Sebaiknya dipakai seperlunya; elemen HTML bawaan didahulukan. |
| Assistive technology (teknologi asistif) | Alat yang dipakai orang untuk mengakses komputer, dari screen reader hingga perangkat switch dan kontrol suara. |
Kesalahpahaman umum
- "Aksesibilitas hanya penting untuk pengguna tunanetra." Ini mencakup disabilitas visual, motorik, pendengaran, bicara, dan kognitif, serta situasi sementara seperti tangan patah.
- "Situs yang aksesibel terlihat polos." Aksesibilitas membatasi beberapa hal — kontras, gaya fokus, ukuran teks — tetapi situs aksesibel yang menarik adalah hal yang biasa, bukan pengecualian.
- "Pemeriksa otomatis bilang 100, jadi selesai." Alat otomatis hanya menangkap sebagian masalah. Apakah alt text benar-benar bermakna, atau apakah alur masuk akal bagi screen reader, perlu diperiksa oleh manusia.
- "Widget overlay akan membuat kami patuh." Toolbar yang ditempel di atas tidak bisa memperbaiki label yang hilang atau akses keyboard yang rusak di kode Anda. Perbaiki sumbernya.
- "Kami tidak punya pengguna disabilitas." Anda mungkin hanya tidak tahu. Banyak disabilitas tidak terlihat, dan orang yang menemui hambatan biasanya langsung pergi.
Yang sebaiknya diminta ke AI builder Anda
- "Bangun ini agar memenuhi WCAG 2.2 level AA."
- "Gunakan HTML semantik: tombol, tautan, dan heading yang nyata sesuai urutan, serta label untuk setiap kolom formulir."
- "Pastikan setiap elemen interaktif bisa dipakai hanya dengan keyboard dan memiliki gaya fokus yang terlihat."
- "Periksa kontras semua warna teks dan ikon — 4,5:1 untuk teks normal, 3:1 untuk teks besar dan ikon."
- "Tambahkan alt text yang bermakna untuk gambar informatif dan alt text kosong untuk gambar dekoratif."
- "Tampilkan error formulir sebagai teks, terhubung ke kolomnya, bukan hanya dengan warna."
- "Hormati pengaturan gerak berkurang (reduced motion) pengguna untuk animasi."
- "Jalankan pemeriksaan aksesibilitas otomatis dan daftarkan apa yang tidak bisa diujinya, agar saya bisa memeriksanya secara manual."
Lalu uji sendiri: singkirkan mouse dan coba selesaikan alur utama hanya dengan Tab, Shift+Tab, Enter, dan Spasi. Coba screen reader bawaan ponsel Anda di halaman utama. Perbesar browser hingga 200% dan lihat apakah ada yang rusak.
Aksesibilitas di Mythex
Mythex tidak menyertakan pemeriksa aksesibilitas khusus, jadi perlakukan aksesibilitas sebagai bagian dari prompt dan pengujian Anda. Minta WCAG 2.2 AA sejak prompt pertama, periksa hasilnya di Preview dengan keyboard, dan gunakan /test agar agent mengklik alur utama Anda sebelum Anda mempublikasikan — lihat App Testing. Resep SEO juga meminta heading semantik dan alt text yang bermakna, yang melayani kedua tujuan.
Untuk daftar periksa praktis, lihat cara membuat situs web Anda aksesibel. Untuk desain, baca cara mendesain aplikasi yang bagus dengan AI, dan sebelum peluncuran, cara menguji aplikasi Anda sebelum diluncurkan. Ikhtisar WCAG dari W3C sendiri adalah sumber yang otoritatif.
Pertanyaan
Apa itu aksesibilitas web dengan bahasa sederhana?
Aksesibilitas web berarti merancang dan membangun situs serta aplikasi web agar penyandang disabilitas dapat memahami, mengenali, menavigasi, dan menggunakannya. Ini mencakup pengguna tunanetra yang memakai screen reader, orang yang tidak bisa memakai mouse, orang dengan penglihatan rendah atau buta warna, pengguna tunarungu, dan penyandang disabilitas kognitif.
Apa itu WCAG?
WCAG (Web Content Accessibility Guidelines) adalah standar internasional untuk aksesibilitas web, yang diterbitkan oleh W3C. Versi terbaru adalah WCAG 2.2, pertama kali terbit pada Oktober 2023. Kriteria keberhasilannya dibagi menjadi level A, AA, dan AAA, dan level AA adalah target yang paling sering dirujuk oleh organisasi dan hukum.
Berapa rasio kontras warna yang diwajibkan WCAG?
Pada level AA, teks normal membutuhkan rasio kontras minimal 4,5:1 terhadap latarnya, dan teks besar (kira-kira 18 pt, atau 14 pt tebal) membutuhkan minimal 3:1. Ikon dan bagian yang terlihat dari kontrol membutuhkan minimal 3:1 terhadap apa pun di sebelahnya.
Apakah aksesibilitas web merupakan kewajiban hukum?
Di banyak tempat, untuk banyak organisasi, ya. Aturannya berbeda menurut negara dan sektor — misalnya, European Accessibility Act mencakup banyak produk dan layanan digital konsumen di Uni Eropa. Periksa aturan yang berlaku untuk Anda, atau tanyakan kepada konsultan hukum.
Apakah overlay atau widget aksesibilitas bisa membuat situs saya patuh?
Tidak dengan sendirinya. Overlay menambahkan toolbar di atas situs Anda tetapi tidak dapat secara andal memperbaiki masalah mendasar seperti label yang hilang, navigasi keyboard yang tidak bisa dipakai, atau struktur yang tidak jelas. Pendekatan yang bisa diandalkan adalah memperbaiki kode dan konten situs.