Dasar-Dasar Aksesibilitas Web — Membangun Situs Web untuk Semua Orang

Lebih dari satu miliar orang di seluruh dunia hidup dengan beberapa bentuk disabilitas. Itu kira-kira 15% dari populasi global. Di antara mereka ada orang yang buta atau memiliki penglihatan rendah, orang yang tuli atau sulit mendengar, orang dengan gangguan motorik, perbedaan kognitif, atau kondisi sementara seperti tangan patah atau migrain.

Ketika kita membangun situs web tanpa mempertimbangkan kenyataan ini, kita tidak hanya membuat sesuatu menjadi tidak nyaman. Kita mengunci orang dari informasi, layanan, dan peluang yang dianggap wajar oleh orang lain. Aksesibilitas bukan fitur. Ini adalah tanggung jawab.

Apa arti aksesibilitas web

Aksesibilitas web berarti merancang dan mengembangkan situs web sehingga orang dengan disabilitas dapat melihat, memahami, bernavigasi, dan berinteraksi dengannya. Ini juga berarti mereka dapat berkontribusi pada web.

Ini melampaui pembaca layar. Aksesibilitas mencakup:

• Visual: kebutaan, penglihatan rendah, buta warna
• Auditori: tuli, sulit mendengar
• Motorik: kontrol motorik halus terbatas, tremor, kelumpuhan
• Kognitif: disleksia, ADHD, kesulitan memori, ketidakmampuan belajar
• Sementara dan situasional: pergelangan tangan patah, sinar matahari terang di layar, lingkungan bising, internet lambat

Wawasan utamanya: desain yang aksesibel bermanfaat bagi semua orang. Teks terjemahan membantu di ruangan yang bising. Kontras tinggi membantu di bawah cahaya terang. Navigasi keyboard membantu pengguna mahir. Tulisan yang jelas membantu penutur non-asli. Aksesibilitas bukan mode khusus — ini adalah desain yang baik.

Standar WCAG

Pedoman Aksesibilitas Konten Web (WCAG) adalah standar internasional untuk aksesibilitas web, diterbitkan oleh W3C. Versi saat ini adalah WCAG 2.2, diorganisasikan berdasarkan empat prinsip yang dikenal dengan akronim POUR:

Dapat Dipersepsi (Perceivable)

Informasi harus disajikan dengan cara yang dapat dipersepsi oleh semua pengguna.

• Alternatif teks: setiap gambar memerlukan atribut alt yang mendeskripsikan kontennya. Gambar dekoratif menggunakan alt="".
• Teks terjemahan dan transkrip: konten video memerlukan teks terjemahan; konten audio memerlukan transkrip.
• Struktur yang dapat disesuaikan: konten harus masuk akal ketika gaya dihapus. Gunakan HTML semantik (<h1>, <nav>, <main>, <article>).
• Konten yang dapat dibedakan: kontras warna yang cukup, teks yang dapat diubah ukurannya, tidak ada informasi yang disampaikan hanya melalui warna.

Dapat Dioperasikan (Operable)

Pengguna harus dapat mengoperasikan antarmuka.

• Dapat diakses keyboard: setiap elemen interaktif harus dapat dijangkau dan digunakan hanya dengan keyboard. Tidak ada jebakan mouse.
• Waktu yang cukup: jika konten memiliki batas waktu, pengguna harus dapat memperpanjang atau menonaktifkannya.
• Tidak ada pemicu kejang: hindari konten yang berkedip lebih dari tiga kali per detik.
• Dapat dinavigasi: judul halaman yang jelas, struktur heading yang logis, tautan lewati navigasi, indikator fokus yang terlihat.

Dapat Dimengerti (Understandable)

Konten dan antarmuka harus dapat dimengerti.

• Teks yang dapat dibaca: tentukan bahasa halaman (atribut lang). Gunakan bahasa yang jelas dan sederhana bila memungkinkan.
• Perilaku yang dapat diprediksi: navigasi harus konsisten. Halaman tidak boleh mengubah konteks secara tidak terduga.
• Bantuan input: beri label pada kolom formulir dengan jelas. Berikan pesan kesalahan yang membantu yang menjelaskan apa yang salah dan cara memperbaikinya.

Kokoh (Robust)

Konten harus cukup kokoh untuk bekerja dengan teknologi saat ini dan masa depan.

• HTML yang valid: markup semantik yang benar yang dapat ditafsirkan secara andal oleh teknologi bantu.
• Nama, peran, nilai: komponen kustom harus mengekspos tujuannya ke API aksesibilitas (melalui ARIA bila diperlukan).

Tingkat kepatuhan

WCAG mendefinisikan tiga tingkat:

Sebagian besar peraturan di seluruh dunia mensyaratkan kepatuhan Tingkat AA. Ini adalah tingkat yang harus Anda tuju.

Hambatan umum dan cara memperbaikinya

Teks alt yang hilang pada gambar

Masalahnya: pengguna pembaca layar mendengar "gambar" atau tidak mendengar apa-apa.

Solusinya: tambahkan teks alt deskriptif ke setiap gambar informatif. Untuk gambar dekoratif, gunakan alt="" agar pembaca layar melewatinya.

<!-- Good -->
<img
  src="chart.png"
  alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>

<!-- Decorative -->
<img src="divider.svg" alt="" />

Kontras warna yang tidak memadai

Masalahnya: orang dengan penglihatan rendah atau buta warna tidak dapat membaca teks.

Solusinya: pastikan rasio kontras minimum 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18px+ atau 14px tebal). Gunakan alat pemeriksa kontras untuk memverifikasi kombinasi warna Anda.

Label formulir yang hilang

Masalahnya: pengguna pembaca layar tidak tahu untuk apa kolom formulir.

Solusinya: setiap kolom input memerlukan elemen <label> yang terlihat yang ditautkan melalui atribut for.

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />

<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />

Tidak ada navigasi keyboard

Masalahnya: pengguna yang tidak dapat menggunakan mouse terjebak.

Solusinya: gunakan elemen HTML bawaan (<button>, <a>, <select>) yang dapat diakses keyboard secara default. Jika Anda membangun komponen kustom, pastikan mereka dapat difokuskan dan merespons event keyboard. Jangan pernah menghapus outline fokus tanpa memberikan alternatif.

Struktur halaman yang hilang

Masalahnya: pengguna pembaca layar tidak dapat bernavigasi secara efisien.

Solusinya: gunakan HTML semantik. Satu <h1> per halaman, hierarki heading yang logis (tanpa melewati level), landmark (<nav>, <main>, <footer>).

Media yang otomatis diputar

Masalahnya: audio yang tidak terduga mengganggu pengguna pembaca layar. Video yang otomatis diputar dapat memicu kejang atau menyebabkan gangguan.

Solusinya: jangan pernah memutar audio secara otomatis. Jika video diputar otomatis, pastikan tidak ada audio secara default dan sediakan kontrol jeda.

Warna saja tidak cukup

Jangan pernah mengandalkan warna sebagai satu-satunya cara menyampaikan informasi. Pertimbangkan:

• Kolom formulir dengan border merah untuk kesalahan juga memerlukan ikon atau pesan teks
• Grafik dengan garis berwarna juga memerlukan pola, label, atau legenda
• Tautan dalam teks memerlukan garis bawah atau petunjuk visual lain, bukan hanya perubahan warna

Sekitar 8% pria dan 0,5% wanita memiliki beberapa bentuk defisiensi penglihatan warna. Mendesain dengan mempertimbangkan hal ini bukan kasus khusus — ini adalah inklusivitas dasar.

Menguji aksesibilitas

Pengujian otomatis

Alat otomatis menangkap sekitar 30-40% masalah aksesibilitas. Ini adalah langkah pertama yang baik, bukan solusi lengkap.

• axe DevTools (ekstensi browser) — memindai halaman dan melaporkan pelanggaran WCAG
• Lighthouse (bawaan Chrome DevTools) — menyertakan audit aksesibilitas
• WAVE (alat berbasis web) — overlay visual yang menampilkan masalah

Pengujian manual

Banyak masalah aksesibilitas memerlukan penilaian manusia:

• Pengujian keyboard: cabut mouse Anda dan navigasi seluruh situs dengan Tab, Enter, Escape, dan tombol panah. Bisakah Anda menjangkau semuanya? Apakah urutan fokus logis?
• Pengujian pembaca layar: coba VoiceOver (Mac), NVDA (Windows, gratis), atau TalkBack (Android). Apakah konten masuk akal saat dibacakan?
• Pengujian zoom: zoom browser Anda ke 200%. Apakah tata letak masih berfungsi? Apakah ada konten yang terpotong atau tumpang tindih?
• Gerakan dikurangi: aktifkan "kurangi gerakan" di pengaturan OS Anda. Apakah animasi menghormati preferensi ini?

Pengujian pengguna

Umpan balik paling berharga berasal dari orang-orang yang benar-benar menggunakan teknologi bantu dalam kehidupan sehari-hari mereka. Jika anggaran Anda memungkinkan, libatkan pengguna dengan disabilitas dalam proses pengujian Anda.

Aksesibilitas adalah spektrum, bukan kotak centang

Aksesibilitas bukan proyek sekali jalan dengan garis finis. Ini adalah praktik yang berkelanjutan. Situs web berubah, konten ditambahkan, dan hambatan baru dapat muncul dengan setiap pembaruan.

Tujuannya bukan kesempurnaan. Tujuannya adalah perbaikan berkelanjutan dan kepedulian yang tulus terhadap orang-orang yang menggunakan apa yang Anda bangun. Mulailah dengan perubahan yang paling berdampak — kontras warna, teks alt, navigasi keyboard, label formulir — dan bangun dari sana.

Setiap hambatan yang Anda hapus adalah pintu yang Anda buka.

Daftar periksa cepat

• Semua gambar memiliki teks alt yang bermakna (atau alt="" jika dekoratif)
• Kontras warna memenuhi WCAG AA (4,5:1 untuk teks, 3:1 untuk teks besar)
• Semua kolom formulir memiliki label yang terlihat
• Situs sepenuhnya dapat dinavigasi dengan keyboard
• Heading mengikuti hierarki yang logis
• Indikator fokus terlihat
• Bahasa halaman ditetapkan (atribut lang pada <html>)
• Tidak ada informasi yang disampaikan hanya melalui warna
• Video memiliki teks terjemahan
• Animasi menghormati prefers-reduced-motion