ariaaksesibilitasroleMahir3 mnt baca

ARIA: Atribut Aksesibilitas Lanjutan

Pakai aria-label, aria-describedby, dan role dengan tepat. Aturan pertama: jangan pakai ARIA bila HTML cukup.

Kenapa ARIA Ada: Saat HTML Semantik Tidak Cukup

HTML semantik menyelesaikan 90 persen masalah aksesibilitas. Tapi bagaimana dengan tombol yang isinya cuma ikon "X" tanpa teks? Atau pesan error yang muncul tiba-tiba setelah form disubmit? Screen reader tidak bisa menebak maksud elemen-elemen seperti itu. Di sinilah ARIA masuk: singkatan dari Accessible Rich Internet Applications, yaitu sekumpulan atribut khusus yang memberi informasi tambahan kepada teknologi bantu seperti screen reader.

Anggap ARIA sebagai penerjemah. Elemen HTML bicara ke browser, atribut ARIA bicara ke screen reader. Tapi ada satu aturan yang tidak boleh dilanggar.

Aturan Pertama: Jangan Pakai ARIA Bila HTML Cukup

ARIA adalah plester, bukan fondasi. Butuh tombol? Pakai <button>, bukan <div role="button">. Butuh heading? Pakai <h2>, bukan <p role="heading">. ARIA yang salah justru lebih berbahaya daripada tidak ada ARIA sama sekali, karena membuat screen reader mengumumkan hal yang keliru dengan penuh percaya diri.

Contoh 1: aria-label untuk Tombol Ikon

Tombol ikon ada di mana-mana: tombol tutup, tombol cari, tombol menu hamburger. Tanpa teks, screen reader hanya mengumumkan "tombol" tanpa penjelasan.

html

<!-- SALAH: pengguna screen reader tidak tahu tombol ini untuk apa -->
<button>X</button>

<!-- BENAR: aria-label memberi nama yang bisa diumumkan -->
<button aria-label="Tutup dialog">X</button>
<button aria-label="Cari artikel">🔍</button>

Atribut ini tidak mengubah tampilan tombol sama sekali. Ia hanya memberi nama yang bisa dibaca teknologi bantu, sehingga pengalaman pengguna tunanetra setara dengan pengguna yang bisa melihat ikonnya.

Contoh 2: aria-describedby dan role alert di Form Nyata

html

<label for="sandi">Kata sandi:</label>
<input type="password" id="sandi" aria-describedby="syarat" />
<p id="syarat">Minimal 8 karakter dan mengandung angka.</p>

<p role="alert">Email sudah terdaftar, coba email lain.</p>

aria-describedby menghubungkan input ke penjelasan tambahan, sehingga screen reader membacakan syarat tepat setelah label. Sedangkan role="alert" dipakai untuk pesan yang harus langsung diumumkan, seperti error validasi. Tanpa role ini, pengguna tunanetra tidak akan sadar ada pesan error yang muncul di layar.

Kesalahan Umum yang Sering Terjadi

html

<!-- SALAH: menyembunyikan konten penting dari screen reader -->
<button aria-hidden="true">Kirim</button>

<!-- BENAR: aria-hidden hanya untuk ikon dekoratif di dalam tombol berteks -->
<button>Kirim <span aria-hidden="true">🚀</span></button>

aria-hidden="true" berarti "abaikan elemen ini sepenuhnya". Cocok untuk ikon dekoratif, fatal kalau dipasang pada tombol atau teks penting. Kesalahan lain: menulis aria-label pada <div> biasa yang tidak punya peran interaktif, sehingga labelnya tidak pernah dibaca siapa pun.

Catatan teknis: Kalau ragu apakah butuh ARIA, jawabannya hampir selalu tidak. Pakai HTML semantik biasa dulu, dan tambahkan ARIA hanya untuk kasus spesifik seperti tombol ikon, pesan dinamis, atau widget kompleks.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Perbaiki Ikon Misterius

Playground berisi tiga tombol ikon tanpa teks (X, 🔍, ☰). Tambahkan aria-label yang menjelaskan fungsi tiap tombol dalam bahasa Indonesia. Tombol ikon ada di mana-mana di dunia nyata, dari aplikasi HP sampai dashboard admin, dan memberi label yang benar adalah cara tercepat membuat antarmukamu ramah screen reader.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>ARIA</title>
</head>
<body>
  <button>X</button>
  <button>🔍</button>
  <button>☰</button>
</body>
</html>

Open Sandbox