Digital Transformation
ARIA (Accessible Rich Internet Applications)
TL;DR: ARIA (Accessible Rich Internet Applications) adalah sekumpulan atribut HTML yang menambahkan informasi peran, status, dan properti untuk teknologi bantu seperti screen reader. ARIA dipakai untuk menambal komponen interaktif kompleks, bukan untuk menggantikan HTML yang sudah jelas maknanya.
Aturan pertama ARIA justru "jangan pakai ARIA kalau elemen HTML native sudah cukup". Dalam beberapa proyek front-end yang saya tangani, masalah accessibility paling sering muncul bukan karena kurang ARIA, melainkan karena div dipaksa jadi tombol lalu ditambal atribut ARIA seadanya.
Apa itu ARIA?
ARIA adalah spesifikasi dari W3C yang menyediakan atribut seperti role, aria-label, dan aria-expanded untuk menjelaskan elemen yang tidak punya makna bawaan. Analoginya seperti memberi label pada kotak yang isinya tidak terlihat dari luar. ARIA bekerja berdampingan dengan semantic HTML dan merupakan bagian penting dari web accessibility. Detail teknisnya ada di dokumentasi ARIA MDN.
Atribut yang Paling Sering Dipakai
| Atribut | Fungsi |
|---|---|
aria-label | Memberi nama pada elemen tanpa teks terlihat, misal tombol ikon |
aria-expanded | Menandai apakah menu atau accordion sedang terbuka |
aria-hidden | Menyembunyikan elemen dekoratif dari screen reader |
role | Menetapkan peran elemen, misal role="dialog" untuk modal |
Kenapa Penting?
Tanpa ARIA yang tepat, komponen kustom seperti dropdown, tab, atau modal bisa membingungkan pengguna screen reader. Tapi ARIA yang salah lebih buruk daripada tanpa ARIA, karena memberi informasi keliru. Prinsip amannya: gunakan elemen native (button, nav, a) dulu, dan pakai ARIA hanya saat HTML standar tidak menyediakan maknanya.
Pertanyaan Umum
Apakah ARIA wajib di setiap website?
Tidak. Website dengan HTML semantik yang rapi sering tidak butuh banyak ARIA. ARIA paling berguna untuk komponen interaktif kustom.
Apakah ARIA memengaruhi SEO?
Tidak langsung. ARIA ditujukan untuk teknologi bantu, bukan mesin pencari. Namun struktur accessible yang baik mendukung kualitas halaman secara umum.
Istilah Terkait