Kapan Menggunakan ARIA

Sepanjang section ini kita sudah memakai atribut berawalan aria- pada nav, form, dan transkrip. ARIA (Accessible Rich Internet Applications) adalah kumpulan atribut dan role yang menambah makna — memberi tahu pembaca layar apa yang tidak bisa disimpulkan dari elemennya sendiri.

Justru karena mudah ditempel, ARIA paling sering disalahgunakan — salah satu kalimatnya menjadi semboyan: aturan pertama ARIA adalah jangan memakai ARIA.

Aturan Pertama: HTML Native Dulu #

Bila HTML native menyediakan elemen untuk kebutuhan kita, pakai elemen itu. Empat kasus ini paling sering ditambal ARIA padahal solusi nativenya satu kata:

Alasannya bukan selera: ARIA hanya mengubah pengumuman pembaca layar, bukan perilakunya. Dua tombol berikut memperlihatkan jurangnya:

<div role="button" tabindex="0">Tambah ke keranjang</div>

<button type="button">Tambah ke keranjang</button>

Mari kita bedah keduanya:

1. Baris 1 (div role="button"): diumumkan sebagai tombol — tetapi div tidak bisa difokuskan (wajib tabindex="0"), Enter dan Space tidak mengaktifkannya (wajib script), dan fokus serta keadaan dinonaktifkan ikut ditulis sendiri. Tiga atribut dan segudang script mengejar satu button.
2. Baris 1 blok kedua (button): selesai — bisa difokuskan, aktif lewat Enter dan Space, diumumkan benar, dan terus dirawat browser.

Kapan ARIA Masuk Akal #

Dua situasi memang tidak punya elemen native: widget khusus seperti antarmuka tab (di sinilah role="tablist" dan kawanannya bekerja), serta pengumuman perubahan — wilayah yang isinya berganti tanpa fokus berpindah; elemen output dari Section Interactive Elements sudah membawa role="status" untuk itu. Selain keduanya, kebutuhan umum hampir selalu dijawab HTML native.

Prinsip pengamannya satu: tanpa ARIA lebih baik daripada ARIA yang salah. ARIA keliru membuat pembaca layar berbohong — pengguna mendengar “tombol” pada elemen yang tidak bisa ditekan. Markup polos setidaknya tidak menjanjikan apa-apa.

Enam Atribut Inti #

Enam atribut ini menutupi hampir semua kebutuhan halaman biasa:

Perlu dikatakan dengan jujur: perbedaan yang dibawa atribut-atribut itu tidak terlihat oleh mata. Dua kotak centang berikut tampak serupa dan berperilaku serupa — satu polos, satu ber-aria-label. Tekan Tab hingga fokus tiba di masing-masing kotak, lalu Space untuk mencencentangnya:

Keduanya mencencentang dengan sempurna — ARIA tidak menambah atau mengubah perilaku apa pun. Yang berbeda hanya pengumumannya: kotak pertama diumumkan sekadar “check box” tanpa nama (markup yang kurang — jangan ditiru pada halaman sungguhan), kotak kedua diumumkan sebagai “Setuju menerima kabar mingguan, check box”. Perbedaan itu baru terdengar lewat pembaca layar; inilah kerja ARIA: lapisan makna, bukan lapisan fungsi.

aria-hidden untuk Dekorasi #

aria-hidden="true" menyembunyikan elemen beserta isinya dari pembaca layar — berguna untuk ikon hias yang teksnya sudah ada di sebelahnya:

<button type="button">
  <span aria-hidden="true">✕</span>
  <span>Tutup</span>
</button>

Mari kita bedah:

1. Baris 2 (span aria-hidden="true"): ikon ✕ disembunyikan dari pembaca layar — hiasan tidak ikut diumumkan.
2. Baris 3 (span “Tutup”): nama tombol sepenuhnya diambil dari teks ini — fokus tiba, pengguna mendengar “Tutup, tombol”.

Ringkasan #

• ARIA menambah makna, bukan perilaku — keyboard tetap harus bekerja sungguhan.
• Aturan pertama: elemen native selalu menang atas div role="...".
• ARIA masuk akal untuk widget tanpa native dan pengumuman perubahan.
• Tanpa ARIA lebih baik daripada ARIA salah; aria-hidden tidak boleh menutup elemen fokusable.

Semua materi section ini bermuara pada satu kebiasaan terakhir — memeriksa hasilnya; lapisan ujinya kita susun pada chapter penutup.