Pembaca layar dan aturan pertama ARIA

Aturan pertama ARIA adalah menghindarinya: kalau elemen HTML bawaan seperti button sudah melakukan tugasnya, pakai elemen itu alih-alih menambahkan role pada div.

Apa yang dibaca pembaca layar

Pembaca layar tidak membaca piksel. Browser membangun pohon aksesibilitas dari HTML, yaitu salinan halaman yang disederhanakan, tempat setiap elemen penting punya peran (button, link, heading, checkbox), nama (teks yang mengenalinya), dan kadang keadaan (checked, expanded, disabled). Pembaca layar membacakan pohon itu dengan suara atau mengirimnya ke layar braille. Kriteria keberhasilan WCAG 2.2 4.1.2 Nama, Peran, Nilai, pada level A, meminta agar setiap kontrol di halaman menampilkan ketiga hal itu.

Pengguna jarang mendengarkan halaman dari atas sampai bawah. Pembaca layar bawaan sistem operasi besar, dan yang gratis untuk dipasang, membuat orang bisa memunculkan daftar judul, tautan, atau landmark, melompat ke kolom formulir berikutnya, atau membaca satu baris sekali jalan. Karena itulah unit-unit sebelumnya begitu penting: judul sungguhan, kolom berlabel, tombol yang memang tombol, dan teks alt semuanya langsung masuk ke pohon itu. Atribut lang pada elemen html juga penting. Kriteria 3.1.1 Bahasa Halaman memintanya, dan pembaca layar memakainya untuk memilih suara dan pelafalan yang tepat.

Apa yang ditambahkan ARIA

WAI-ARIA (Accessible Rich Internet Applications) adalah sekumpulan atribut yang mengubah apa yang masuk ke pohon aksesibilitas: role menetapkan peran, atribut seperti aria-label menetapkan nama, dan atribut seperti aria-checked atau aria-expanded menetapkan keadaan. ARIA hanya mengubah apa yang diumumkan. ARIA tidak membuat elemen bisa difokuskan, tidak menambahkan perilaku papan ketik, dan tidak mengubah tampilannya. W3C ARIA Authoring Practices Guide menuliskannya sebagai judul: "No ARIA is better than bad ARIA" (tanpa ARIA lebih baik daripada ARIA yang buruk). ARIA yang salah memberi tahu pengguna pembaca layar sesuatu yang keliru tentang halaman.

Aturan pemakaian ARIA

Dokumen W3C Using ARIA memuat aturan-aturan singkat yang dikutip di mana-mana (dokumen itu ditandai sebagai draf yang dihentikan pada Februari 2026, tetapi aturannya sendiri tidak berubah). Aturan 1: kalau kamu bisa memakai elemen atau atribut HTML bawaan yang sudah memiliki makna dan perilaku yang kamu butuhkan, pakailah, alih-alih mengalihfungsikan elemen lain dengan ARIA. Aturan 2: jangan ubah semantik bawaan kecuali benar-benar terpaksa. Aturan 3: setiap kontrol ARIA yang interaktif harus bisa dipakai dengan papan ketik. Aturan 4: jangan pasang role="presentation" atau aria-hidden="true" pada elemen yang bisa menerima fokus, karena sebagian pengguna akan mendarat di "kekosongan".

ARIA benar-benar membantu ketika mengisi celah yang tidak bisa diisi HTML. Tombol yang hanya berisi ikon tidak punya teks, jadi tidak punya nama; aria-label="Close" memberinya nama. Ikon SVG di sebelah teks yang terlihat adalah hiasan, dan aria-hidden="true" pada svg menjauhkannya dari pohon. Itulah dua atribut yang paling dibutuhkan pemula. Untuk widget utuh seperti tab atau menu, ikuti pola yang sesuai di Authoring Practices Guide daripada menciptakan pola sendiri.