Lewati ke konten utama
menjadi.dev
Chapter 2.6 Accessibility Pemula

Aksesibilitas Web untuk Semua Orang

Prinsip WCAG, ARIA, dan membuat web yang inklusif

Tujuan Pembelajaran

  • Memahami pentingnya aksesibilitas web
  • Bisa menerapkan praktik aksesibilitas dasar
  • Mengenal ARIA dan kapan menggunakannya

Analogi

Diagram 

      Aksesibilitas = Fasilitas Umum:\n\nRambar Jalan  = alt text untuk gambar\nBraille      = semantic HTML + screen reader\nLift         = keyboard navigation\nPapan Besar  = warna kontras tinggi + font besar

Web yang aksesibel bisa diakses semua orang, termasuk penyandang disabilitas

Penjelasan Konsep

Pernahkah kamu memperhatikan fasilitas di dunia nyata yang dirancang untuk penyandang disabilitas? Rambu-rambu lalu lintas dengan suara untuk tunanetra, rambatan (ramp) di trotoar untuk kursi roda, lift dengan tombol braille, pintu otomatis yang bisa dibuka tanpa menggunakan tangan. Fasilitas ini tidak hanya membantu penyandang disabilitas — orang tua dengan kereta bayi, orang yang membawa barang berat, atau seseorang dengan kaki cedera juga terbantu. Ini adalah prinsip universal design: desain yang baik membantu semua orang.

Di dunia web, prinsip yang sama berlaku.

Aksesibilitas web (a11y)

Aksesibilitas web (a11y) berarti memastikan website bisa diakses dan digunakan oleh semua orang, termasuk penyandang disabilitas. Menurut WHO, ada 1 miliar orang di dunia yang memiliki disabilitas — itu 15% populasi dunia! Dan banyak dari mereka menggunakan internet setiap hari.

Macam-macam Disabilitas yang Perlu Diperhatikan

Tunanetra (Visual Impairment)

Mereka menggunakan screen reader, software yang membaca konten halaman dengan suara. Screen reader mengandalkan tag HTML semantic untuk memahami struktur — itulah kenapa <h1>, <nav>, <main>, <article>, dan alt text sangat penting.

Tanpa tag semantic, screen reader hanya bisa membaca teks tanpa konteks — seperti mendengar buku tanpa tahu mana judul,

Mana paragraf, mana navigasi.

Tunarungu (Hearing Impairment)

Mereka tidak bisa mendengar audio atau video.

Solusinya: sediakan subtitle/caption untuk video, transkrip untuk podcast,

Dan jangan mengandalkan suara sebagai satu-satunya cara menyampaikan informasi.

Motor Impairment

Mereka mungkin tidak bisa menggunakan mouse dengan presisi, atau sama sekali.

Mereka mengandalkan keyboard navigation — berpindah antar elemen menggunakan tombol Tab, Enter, dan panah.

Semua elemen interaktif di website-mu harus bisa diakses dengan keyboard.

Kognitif

Mereka mungkin kesulitan memproses informasi kompleks.

Solusinya: gunakan bahasa yang jelas dan sederhana, konsisten dalam navigasi, berikan instruksi yang jelas, dan hindari distraksi yang berlebihan.

Praktik Aksesibilitas yang Harus Diterapkan

  1. Selalu isi alt text pada gambar — Teks alternatif yang mendeskripsikan gambar. Kalau gambar bersifat dekoratif, gunakan alt="".
  2. Gunakan tag semantic dengan benar — <h1> untuk judul utama, <nav> untuk navigasi, <main> untuk konten utama, <button> untuk tombol (bukan <div onClick>!).
  3. Pastikan semua elemen interaktif bisa diakses keyboard — Coba navigasikan website-mu hanya dengan tombol Tab. Apakah semua link, tombol, dan form bisa difokus?
  4. Gunakan warna dengan kontras yang cukup — Teks harus mudah dibaca di latar belakangnya. Gunakan tool seperti WebAIM Contrast Checker untuk memeriksa.
  5. Jangan mengandalkan warna sebagai satu-satunya cara menyampaikan informasi — Tambahkan ikon atau teks.

Contoh: error form jangan cuma border merah, tambahkan juga pesan error.

  1. Gunakan font yang mudah dibaca — Ukuran minimal 16px untuk body text, line-height yang cukup (1.5x),

Hindari font yang terlalu dekoratif.

ARIA (Accessible Rich Internet Applications)

ARIA adalah set atribut HTML tambahan yang memberikan informasi aksesibilitas lebih detail ke screen reader.

ARIA digunakan ketika HTML semantic tidak cukup — terutama untuk aplikasi web interaktif kompleks.

  • role: Menentukan peran elemen (contoh: role="navigation", role="alert")
  • aria-label: Memberi label untuk elemen (contoh: tombol hamburger menu: aria-label="Menu navigasi")
  • aria-expanded: Menandakan apakah elemen terbuka atau tertutup (untuk dropdown, accordion)
  • aria-live: Memberitahu screen reader bahwa konten akan berubah dinamis (untuk notifikasi,

Hasil pencarian)

Tapi ingat: ARIA adalah pelengkap, bukan pengganti HTML semantic.

Gunakan tag HTML yang benar terlebih dahulu, baru tambahkan ARIA jika diperlukan.

Kenapa aksesibilitas penting?

Selain alasan moral dan inklusi, aksesibilitas juga berdampak positif pada SEO, usability, dan bahkan legal compliance (banyak negara mewajibkan website pemerintah dan layanan publik untuk aksesibel).

Website yang aksesibel adalah website yang berkualitas.

Contoh Kode

html 
<!-- Aksesibilitas: Contoh Baik vs Buruk -->

<!-- ❌ BURUK: Tombol div tanpa aksesibilitas -->
<div onclick="bukaMenu()" class="tombol-menu">☰</div>

<!-- ✅ BAIK: Tombol asli dengan ARIA -->
<button onclick="bukaMenu()" 
        aria-label="Buka menu navigasi"
        aria-expanded="false"
        id="tombol-menu">
  ☰
</button>
<nav id="menu" aria-labelledby="tombol-menu" hidden>
  <ul>
    <li><a href="/">Beranda</a></li>
    <li><a href="/modul">Modul</a></li>
  </ul>
</nav>

<!-- ❌ BURUK: Gambar tanpa alt -->
<img src="grafik.jpg">

<!-- ✅ BAIK: Gambar dengan alt deskriptif -->
<img src="grafik.jpg" 
     alt="Grafik peningkatan traffic website 50% dari Januari ke Juni 2026">

<!-- ❌ BURUK: Form tanpa label -->
<input type="text" placeholder="Nama">

<!-- ✅ BAIK: Form dengan label terhubung -->
<label for="nama-lengkap">Nama Lengkap *</label>
<input type="text" id="nama-lengkap" name="nama" required>

<!-- Skip Link untuk Keyboard Navigation -->
<a href="#konten-utama" class="skip-link">
  Lompat ke konten utama
</a>
<main id="konten-utama">
  <h1>Judul Halaman</h1>
</main>

Penjelasan Kode

Baris 4-8: Tombol semantik dengan aria-label dan aria-expanded. Baris 13-15: Gambar dengan alt deskriptif. Baris 18-20: Label terhubung dengan input via for+id. Baris 23-27: Skip link untuk navigasi keyboard.

Prompt AI

Jelaskan perbedaan antara tag <button> dan <div> yang di-styling seperti tombol dari sudut pandang aksesibilitas. Kenapa <button> lebih baik?

Pertanyaan Reflektif

Coba navigasikan website favoritmu hanya dengan tombol Tab (tanpa mouse!). Berapa banyak elemen yang tidak bisa diakses? Apakah ada skip link?