ARIA (Accessible Rich Internet Applications)

ARIA (Accessible Rich Internet Applications) adalah seperangkat atribut dan peran khusus yang ditambahkan ke elemen HTML untuk meningkatkan aksesibilitas konten web, terutama aplikasi web yang dinamis dan kompleks (sering dibangun dengan JavaScript). ARIA membantu menjembatani kesenjangan antara kemampuan HTML standar dan kebutuhan teknologi bantu (assistive technology) seperti screen reader.

Mesin pencari seperti Google juga mempertimbangkan aksesibilitas dalam peringkat mereka.

Mengapa ARIA Dibutuhkan?

HTML memiliki banyak elemen semantik yang secara alami dapat diakses (misalnya, <button>, <a>, <input>). Namun, dalam pengembangan web modern, sering kali kita membuat komponen UI kustom yang secara visual menyerupai kontrol standar tetapi tidak memiliki semantik aksesibilitas bawaan.

Contoh: Anda bisa membuat tombol menggunakan <div> dan JavaScript, tapi secara default, screen reader tidak akan tahu itu tombol. Di sinilah ARIA berperan. ARIA memungkinkan kita untuk:

Menyampaikan peran (apa itu elemen: tombol, slider, dialog)
Menyampaikan state (kondisinya saat ini: terpilih, dinonaktifkan, terbuka)
Menyampaikan properti (karakteristiknya: memiliki popup, memiliki label)

...kepada assistive technology, sehingga pengguna dapat memahami dan berinteraksi dengan elemen tersebut.

5 Aturan Dasar Penggunaan ARIA (Prinsip Emas)

Penting untuk diingat bahwa ARIA harus digunakan dengan bijak. Penggunaan ARIA yang salah dapat memperburuk aksesibilitas! WebAIM merangkumnya dalam 5 aturan dasar:

Jika Anda dapat menggunakan elemen atau atribut HTML bawaan dengan semantik dan perilaku yang sudah ada, lakukanlah.
- Prioritaskan HTML semantik. Ini adalah aturan terpenting. Misalnya, gunakan <button> daripada <div role="button">. Elemen HTML asli sudah memiliki dukungan keyboard dan semantik aksesibilitas bawaan. ARIA harus menjadi pelengkap, bukan pengganti.
Jangan ubah semantik bawaan elemen HTML, kecuali Anda benar-benar harus.
- Misalnya, sebuah <ul> adalah daftar tak berurutan. Jangan memberikan role="navigation" langsung pada <ul> karena ini akan menghilangkan semantik daftar. Lebih baik bungkus <ul> dalam <nav> (atau <div role="navigation">).
Semua kontrol ARIA interaktif harus dapat digunakan dengan keyboard.
- Jika Anda membuat widget kustom dengan ARIA (misalnya, slider), Anda bertanggung jawab untuk mengimplementasikan perilaku keyboard yang tepat (misalnya, menanggapi arrow keys, Enter, Spacebar).
Kontrol interaktif harus memiliki semantik yang tepat dan tidak boleh disembunyikan secara semantik.
- Elemen yang dapat difokuskan (focusable) harus memiliki peran yang benar (misalnya, role="button", role="link") dan tidak boleh disembunyikan dari assistive technology menggunakan aria-hidden="true".
Semua elemen interaktif harus memiliki nama yang dapat diakses (accessible name).
- Ini adalah teks yang akan dibaca oleh screen reader saat elemen tersebut difokuskan. Bisa berupa teks visual, Alt Text gambar, atau disediakan melalui atribut ARIA seperti aria-label atau aria-labelledby.

Atribut ARIA Dasar

ARIA memiliki tiga kategori atribut utama: Roles, Properties, dan States.

1. `role` Atribut

Atribut role mendefinisikan jenis elemen UI atau struktur sebuah area pada halaman kepada assistive technology. Ini menjelaskan "apa" elemen tersebut.

Contoh Penggunaan:
- role="button": Mengidentifikasi elemen sebagai tombol yang dapat diklik.
  HTML
```
<div role="button" tabindex="0">Kirim</div>
```
- role="navigation": Mengidentifikasi bagian sebagai blok navigasi utama.
  HTML
```
<div role="navigation">
    <ul>...</ul>
</div>
```
- role="dialog": Mengidentifikasi sebuah elemen sebagai kotak dialog atau modal.
  HTML
```
<div role="dialog" aria-modal="true" aria-labelledby="dialogTitle">
    <h2 id="dialogTitle">Judul Dialog</h2>
    </div>
```
Kategori Peran ARIA:
- Landmark Roles: Menjelaskan struktur besar halaman (misalnya main, banner, navigation, contentinfo, complementary). Banyak di antaranya sekarang memiliki tag HTML5 semantik (<main>, <header>, <nav>, <footer>, <aside>).
- Document Structure Roles: Mendefinisikan struktur konten di dalam landmark (misalnya article, heading, list, listitem). Sebagian besar juga memiliki tag HTML semantik.
- Widget Roles: Digunakan untuk elemen interaktif yang kompleks (misalnya button, checkbox, slider, tab, dialog). Ini adalah area di mana ARIA paling sering digunakan untuk membuat custom widget aksesibel.

2. `aria-label` dan `aria-labelledby` (Properti Memberi Nama)

Atribut ini memberikan "nama" yang dapat diakses untuk sebuah elemen, yang akan dibaca oleh screen reader.

aria-label: Digunakan untuk memberikan label tekstual ke elemen ketika tidak ada teks visual yang dapat digunakan sebagai label, atau ketika teks visual tidak cukup deskriptif. Atribut ini akan mengganti teks visual elemen.
- Contoh: Tombol ikon tanpa teks.
  HTML
```
<button aria-label="Tutup">
    <img src="close-icon.svg" alt="Ikon silang">
</button>
```
  Screen reader akan membaca "Tutup" saat fokus pada tombol ini.
aria-labelledby: Digunakan untuk mengaitkan elemen dengan ID elemen lain di halaman yang berfungsi sebagai labelnya. Ini berguna ketika label sudah ada secara visual di DOM.
- Contoh: Field formulir yang memiliki heading sebagai labelnya.
  HTML
```
<h2 id="email-label">Alamat Email Anda</h2>
<input type="text" aria-labelledby="email-label">
```
  Screen reader akan mengaitkan heading "Alamat Email Anda" sebagai label untuk input field tersebut.

3. `aria-describedby` (Properti Memberi Deskripsi)

Atribut ini memberikan deskripsi tambahan untuk elemen, yang akan dibaca setelah label. Berguna untuk memberikan instruksi, hint, atau pesan kesalahan.

Contoh: Input field kata sandi dengan persyaratan.

HTML

<label for="password">Kata Sandi</label>
<input type="password" id="password" aria-describedby="password-hint">
<p id="password-hint">Kata sandi harus minimal 8 karakter, mengandung huruf besar dan angka.</p>

Screen reader akan membaca "Kata Sandi, edit teks. Kata sandi harus minimal 8 karakter, mengandung huruf besar dan angka."

4. `aria-hidden` (Properti Menyembunyikan)

Atribut ini memberitahu assistive technology untuk mengabaikan elemen dan semua turunannya. Berguna untuk menyembunyikan konten yang hanya bersifat visual atau duplikat.

Contoh: Ikon yang sudah memiliki Alt Text pada tombol.
HTML
```
<button aria-label="Cari">
    <span class="icon-search" aria-hidden="true"></span> Cari
</button>
```
Di sini, span icon disembunyikan karena teks "Cari" sudah cukup sebagai label.
Penting: Jangan pernah menggunakan aria-hidden="true" pada elemen yang fokusable atau yang memiliki konten penting.

5. `aria-live` (Live Regions)

Atribut ini digunakan untuk area di halaman yang kontennya dapat berubah secara dinamis tanpa refresh halaman (misalnya, notifikasi, hasil pencarian yang diperbarui, live chat). Ini memberitahu screen reader untuk mengumumkan perubahan tersebut kepada pengguna.

aria-live="polite": Screen reader akan menunggu sampai pengguna berhenti berinteraksi atau ada jeda sebelum mengumumkan perubahan. Ideal untuk notifikasi non-kritis.
HTML
```
<div aria-live="polite" role="status">
    </div>
```
Contoh: "Item berhasil ditambahkan ke keranjang."
aria-live="assertive": Screen reader akan segera mengumumkan perubahan, bahkan jika itu mengganggu apa yang sedang dibaca. Hanya gunakan untuk perubahan yang sangat penting dan mendesak (misalnya, pesan kesalahan validasi formulir yang krusial).
HTML
```
<div aria-live="assertive" role="alert">
    </div>
```
Contoh: "Kesalahan: Alamat email tidak valid."

Kapan Harus Menggunakan ARIA?

Gunakan ARIA ketika:

Anda membuat komponen UI kustom yang tidak memiliki padanan HTML semantik yang sempurna.
Anda perlu memberikan informasi tambahan tentang state atau properti dinamis dari sebuah elemen.
Anda perlu mengelola fokus keyboard secara programatis untuk widget kompleks (misalnya, modal, carousel).
Anda perlu mengumumkan pembaruan konten dinamis kepada screen reader.

Ingat aturan emas: "No ARIA is better than bad ARIA." Jika Anda tidak yakin, mungkin lebih baik tidak menggunakannya atau mencari alternatif HTML semantik. Selalu uji implementasi ARIA Anda dengan screen reader yang sebenarnya untuk memastikan efek yang diinginkan.