Penggunaan ARIA

Sampai babak ini, hampir seluruh kebutuhan aksesibilitas kita jawab dengan elemen HTML native. Ada kalanya desain menuntut perilaku yang tak tersedia bawaan: panel yang membuka-menutup, wilayah yang mengumumkan pembaruan, atau kontrol khusus aplikasi. Untuk celah semacam itu, W3C menyediakan ARIA, kumpulan atribut yang menambah semantik tanpa mengubah tampilan. Chapter ini membahas apa itu ARIA, aturan pertamanya yang paling penting, atribut-atribut utamanya, dan satu pola pemakaian yang paling umum.

Apa Itu ARIA #

ARIA (Accessible Rich Internet Applications) adalah spesifikasi W3C berupa atribut tambahan untuk HTML. Atribut-atributnya tidak menggambar apa pun dan tidak menjalankan apa pun; tugasnya satu, yaitu melaporkan peran, keadaan, dan properti elemen kepada accessibility tree yang dibaca assistive technology. Karena itu sebuah div dengan ARIA tetap butuh script agar benar-benar berperilaku; ARIA hanya melapor, bukan bekerja.

Dokumen resmi ARIA in HTML mencatat atribut dan role mana yang sah untuk setiap elemen, dan menjadi rujukan saat kita ragu. Kombinasi yang dilarang — misalnya role yang bertentangan dengan peran bawaan elemen — dapat membuat pengumuman menjadi menyesatkan, lebih buruk daripada tanpa ARIA sama sekali.

Aturan Pertama ARIA #

Aturan pertama ARIA yang tersohor berbunyi: jangan pakai ARIA bila ada elemen HTML native yang setara. Sebuah div yang diberi role="button" memang terdengar sebagai tombol, tetapi segala perilaku tombol harus dibangun ulang sendiri:

<!-- Peran dilaporkan ARIA, perilaku dibangun sendiri -->
<div role="button" tabindex="0">Tambah ke keranjang</div>

<!-- Peran dan seluruh perilaku dibawakan browser -->
<button type="button">Tambah ke keranjang</button>

Atribut role="button" juga membatasi isi elemen: anak div yang berperan tombol sebaiknya hanya teks atau elemen pelabel, sehingga menyelipkan paragraf di dalamnya menabrak aturan dokumen ARIA in HTML. Bandingkan kerja manual itu dengan button native yang memberi seluruh tabel di atas tanpa satu baris tambahan.

Atribut ARIA yang Sering Dipakai #

Dari ratusan atribut ARIA, tujuh berikut mencakup sebagian besar kebutuhan sehari-hari:

Properti menyatakan sifat yang relatif menetap, sedangkan keadaan menyatakan sesuatu yang berubah-ubah; keduanya sama-sama dihitung browser setiap saat. Nilai aria-expanded="false" dan "true" kita ubah lewat script saat panel membuka atau menutup. Sementara aria-live="polite" membuat pengumuman berjalan tanpa memindahkan fokus — pola yang berguna saat hasil pencarian diperbarui, dan pembahasannya menyertakan JavaScript pada section tersendiri.

Contoh: Disclosure dengan aria-expanded #

Pola buka-tutup (disclosure) adalah penggunaan ARIA yang paling sering kita jumpai. Contoh berikut memuat dua keadaan berdampingan agar mudah dibandingkan, ditutup versi native sebagai pembanding:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Disclosure</title>
</head>
<body>
  <h1>Pertanyaan yang Sering Diajukan</h1>

  <h2>Versi ARIA, keadaan tertutup</h2>
  <button type="button" aria-expanded="false" aria-controls="panel-ongkir">Berapa biaya kirim?</button>
  <div id="panel-ongkir" hidden>
    <p>Ongkir flat Rp10.000 untuk wilayah Jakarta Selatan.</p>
  </div>

  <h2>Versi ARIA, keadaan terbuka</h2>
  <button type="button" aria-expanded="true" aria-controls="panel-garansi">Apakah ada garansi tanaman?</button>
  <div id="panel-garansi">
    <p>Tanaman diganti bila rusak saat pengiriman.</p>
  </div>

  <h2>Versi native tanpa JavaScript</h2>
  <details>
    <summary>Bisa titip kado langsung?</summary>
    <p>Bisa. Tulis pesan kado pada kolom catatan pesanan.</p>
  </details>
</body>
</html>

Output yang Dihasilkan:

Pada tombol pertama, screen reader mengumumkan:
  "Berapa biaya kirim?, tombol, diperluas tidak"
Pada tombol kedua:
  "Apakah ada garansi tanaman?, tombol, diperluas"

Mari kita bedah pasangan atributnya:

1. Baris 12 (tombol pertama): aria-expanded="false" menyatakan panel tertutup; screen reader menterjemahkannya menjadi “diperluas tidak”.
2. Baris 13-15 (panel pertama): atribut hidden menyembunyikan panel dari semua pengguna, sehingga keadaan ARIA dan keadaan nyata saling cocok.
3. Baris 18 (tombol kedua): aria-expanded="true" dinyatakan bersama panel yang memang terlihat; keduanya berubah bersamaan saat script bekerja.
4. Baris 19-21 (panel kedua): aria-controls="panel-garansi" merujuk id panel sebagai keterangan relasi, meski sebagian pembaca layar belum selalu memakai informasi ini.
5. Baris 24-27 (details): versi native memberi perilaku buka-tutup dan semantik yang sama tanpa satu atribut ARIA pun.

Setelah semua bahan — heading, keyboard, nama, gambar, form, tabel, dan ARIA — terkumpul, tinggal satu keahlian yang memastikan semuanya benar-benar bekerja: pengujian. Chapter penutup section ini menyusun alat uji dan checklist evaluasinya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — WAI-ARIA basics
• W3C — ARIA in HTML
• MDN Web Docs — ARIA: aria-expanded
• W3C WAI — WAI-ARIA Overview

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Disclosure</title>
</head>
<body>
  <h1>Pertanyaan yang Sering Diajukan</h1>

  <h2>Versi ARIA, keadaan tertutup</h2>
  <button type="button" aria-expanded="false" aria-controls="panel-ongkir">Berapa biaya kirim?</button>
  <div id="panel-ongkir" hidden>
    <p>Ongkir flat Rp10.000 untuk wilayah Jakarta Selatan.</p>
  </div>

  <h2>Versi ARIA, keadaan terbuka</h2>
  <button type="button" aria-expanded="true" aria-controls="panel-garansi">Apakah ada garansi tanaman?</button>
  <div id="panel-garansi">
    <p>Tanaman diganti bila rusak saat pengiriman.</p>
  </div>

  <h2>Versi native tanpa JavaScript</h2>
  <details>
    <summary>Bisa titip kado langsung?</summary>
    <p>Bisa. Tulis pesan kado pada kolom catatan pesanan.</p>
  </details>
</body>
</html>