Peran ARIA

ARIA (Accessible Rich Internet Applications) adalah spesifikasi W3C berupa kumpulan atribut yang menambahkan semantik pada markup ketika semantik bawaan HTML tidak mencukupi. Topik ini membahas kedudukan ARIA sebagai lapisan tambahan di atas HTML, aturan pertama ARIA yang mengutamakan elemen native, pembagian peran, properti, dan status, serta penyediaan nama aksesibel melalui aria-label dan aria-labelledby. Setelah mengikuti topik ini, keputusan kapan ARIA perlu ditambahkan dan kapan sebaiknya dihindari dapat diambil dengan dasar yang jelas.

Kedudukan ARIA sebagai lapisan semantik tambahan#

Browser membentuk pohon aksesibilitas (accessibility tree) dari DOM sebelum halaman diperlihatkan kepada alat bantu. Setiap elemen pada pohon itu membawa peran implisit, nama, dan status yang berasal dari markup HTML, misalnya elemen button dilaporkan sebagai tombol yang dapat diaktifkan. Alat bantu seperti screen reader (pembaca layar) membacakan pohon tersebut, sehingga pengalaman pengguna pembaca layar ditentukan oleh semantik yang ada pada pohon itu, bukan oleh tampilan visual halaman.

ARIA bekerja sebagai lapisan di atas mekanisme tersebut. Atribut role dan atribut berawalan aria- mengubah atau melengkapi informasi yang dikirim browser ke pohon aksesibilitas, sedangkan tampilan dan perilaku bawaan browser tidak berubah sama sekali. Sebuah div yang diberi role="button" dilaporkan sebagai tombol, tetapi tetap tidak menerima fokus, tidak merespons Enter dan spasi, serta tidak menampilkan kursor penunjuk. Karena itu, ARIA paling tepat dipandang sebagai pelengkap semantik, bukan pengganti elemen HTML yang sudah ada.

Diagram di atas merangkum jalur semantik tersebut. Markup HTML memberi semantik bawaan, atribut ARIA menambahkan semantik yang belum ada, dan browser menghimpun semuanya ke dalam pohon aksesibilitas sebelum diserahkan kepada alat bantu. Lapisan ARIA hanya berguna apabila lapisan HTML di bawahnya sudah tertata, karena ARIA tidak memperbaiki markup yang salah, melainkan menumpang padanya.

Aturan pertama ARIA#

Praktik ARIA berangkat dari satu aturan yang dirumuskan pada Authoring Practices Guide, yaitu jangan menggunakan ARIA apabila elemen HTML native sudah tersedia dengan semantik yang diinginkan. Aturan ini muncul karena elemen native membawa semantik, fokus, dan dukungan papan ketik sekaligus, sedangkan elemen ber-ARIA hanya membawa semantiknya saja. Perbandingan berikut menunjukkan dua cara membuat tombol yang sama.

<!-- memenuhi aturan pertama: semantik, fokus, dan papan ketik bawaan browser -->
<button type="button" onclick="simpanCatatan()">Simpan catatan</button>

<!-- melanggar aturan pertama: semua sifat tombol dikerjakan sendiri -->
<div role="button" tabindex="0" onclick="simpanCatatan()"
     onkeydown="if (event.key === 'Enter' || event.key === ' ') simpanCatatan()">
  Simpan catatan
</div>

Tombol native melaporkan dirinya sebagai tombol, dapat difokuskan dengan Tab, dan merespons Enter serta spasi tanpa satu baris skrip pun. Versi div dilaporkan sebagai tombol hanya setelah role ditambahkan, dan dukungan fokus serta papan ketiknya ditulis manual seperti terlihat pada atribut tabindex dan onkeydown. Meski begitu, versi div masih memiliki kekurangan, misalnya status disabled yang tidak diumumkan secara otomatis. Tabel berikut merangkum perbandingan untuk beberapa kebutuhan yang sering muncul.

Peran, properti, dan status#

Atribut ARIA terbagi menjadi tiga jenis yang bekerja bersama. Peran (role) menyatakan identitas sebuah elemen, misalnya role="progressbar" untuk bilah kemajuan yang tidak memiliki padanan HTML. Properti menyatakan sifat atau hubungan yang jarang berubah selama halaman digunakan, seperti aria-labelledby yang menghubungkan elemen dengan teks pemberi namanya. Status menyatakan kondisi yang dapat berubah kapan saja, seperti aria-expanded="true" pada tombol pengungkap yang sedang terbuka.

Pembagian ini membantu memilih atribut yang tepat, walaupun batas antara properti dan status pada spesifikasi tidak selalu tegas. Kebiasaan yang perlu dipegang adalah peran ditulis sekali sebagai identitas, sedangkan status diperbarui oleh skrip setiap kali keadaan widget berubah. Sebuah bilah kemajuan buatan ARIA misalnya menggunakan role="progressbar" beserta properti aria-valuemin dan aria-valuemax yang tetap, sementara aria-valuenow diperbarui setiap kemajuannya bertambah.

Nama aksesibel dengan aria-label dan aria-labelledby#

Nama aksesibel (accessible name) adalah label yang dibacakan alat bantu ketika sebuah kontrol menerima fokus. Browser menghitung nama itu dari beberapa sumber berurutan, mulai dari teks di dalam elemen, atribut alt untuk gambar, elemen label untuk masukan, dan akhirnya atribut ARIA. Dua atribut ARIA yang menyediakan nama adalah aria-label berupa teks langsung, serta aria-labelledby yang merujuk id elemen lain agar teksnya menjadi nama.

aria-label digunakan ketika kontrol tidak memiliki teks terlihat sama sekali, misalnya tombol ikon tutup yang hanya memuat karakter ×. aria-labelledby lebih diutamakan ketika teks yang tepat sudah terlihat di dekat elemen, karena nama aksesibel dan teks visualnya menjadi sama persis. Kedua atribut menimpa nama bawaan elemen, sehingga penulisan yang asal hanya menambah kebingungan.

<button type="button" aria-label="Tutup dialog">×</button>

<nav aria-label="Pelajaran">
  <a href="/anatomi">Anatomi dokumen</a>
</nav>
<nav aria-label="Sumber rujukan">
  <a href="/spesifikasi">Spesifikasi HTML</a>
</nav>

Dua elemen nav di atas diberi nama berbeda agar alat bantu dapat membedakannya ketika pengguna melompat antarnavigasi. Tanpa aria-label, kedua navigasi dilaporkan dengan nama yang sama, yaitu navigation, dan pengguna tidak dapat memilih yang mana yang dituju.

<section aria-labelledby="judul-rangkuman">
  <h2 id="judul-rangkuman">Rangkuman nilai</h2>
  <p>Rata-rata nilai naik dari 70 menjadi 84 pada semester ini.</p>
</section>

Bagian section di atas menerima nama dari judulnya melalui aria-labelledby, sehingga pembaca layar dapat membacakan Rangkuman nilai ketika masuk ke bagian itu. Atribut ini menerima beberapa id sekaligus yang digabung sesuai urutannya, dan nilainya menimpa nama bawaan section yang memang tidak ada.

Bahaya ARIA yang ditanam sembarangan#

ARIA yang salah justru menurunkan aksesibilitas dibandingkan tanpa ARIA sama sekali. Penyebab yang paling sering adalah peran yang menimpa semantik native, atribut yang diletakkan pada elemen yang tidak mendukungnya, dan ARIA yang digunakan menutupi markup yang cacat. Contoh yang umum adalah aria-label pada div tanpa peran. Elemen div tidak memiliki semantik widget apa pun, sehingga sebagian besar alat bantu tidak pernah membacakan aria-label-nya, padahal penulisnya yakin sudah memberi nama.

Kasus lain yang sering muncul adalah atribut yang menggantung tanpa pasangannya, misalnya aria-expanded yang ditulis pada tombol tanpa pernah diperbarui skrip, sehingga status yang dibacakan berlawanan dengan keadaan sebenarnya. Kebiasaan yang lebih aman adalah memeriksa elemen native terlebih dahulu pada setiap kebutuhan. Tambahkan ARIA hanya apabila tidak ada padanan native, atau apabila padanan native memang tidak mencukupi untuk widget yang kompleks. Setelah ARIA ditambahkan, uji halaman dengan pembaca layar dan dengan papan ketik saja, karena klaim aksesibilitas hanya dapat dipastikan setelah halaman benar-benar dicoba dengan alat bantunya.

Berkas utuh aria.html#

Berkas berikut menghimpun penggunaan ARIA yang tepat pada satu halaman, yaitu dua navigasi yang dibedakan aria-label, bagian yang diberi nama lewat aria-labelledby, tombol ikon dengan aria-label, dan bilah kemajuan yang menggunakan peran beserta properti nilainya.

Berkas ini dapat dibuka langsung di browser tanpa jaringan. Perhatikan bahwa tidak ada satu pun elemen yang perannya ditimpa, dan setiap atribut ARIA di sini mengisi kekosongan semantik, bukan mengulang semantik yang sudah ada. Elemen section dan nav tetap dipertahankan sebagai fondasinya, sedangkan bilah kemajuan adalah satu-satunya widget yang benar-benar memerlukan ARIA karena HTML tidak menyediakan elemennya.

Bilah kemajuan pada berkas itu hanya berupa div yang diberi warna CSS, sehingga tanpa ARIA alat bantu tidak mengetahui fungsinya sama sekali. Dengan peran beserta properti nilainya, kontrol itu umumnya dibacakan sebagai bilah kemajuan bernama Progres tugas piket yang berada pada angka 60. Perbedaan seperti inilah yang menjadi ukuran kapan ARIA benar-benar diperlukan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>ARIA pada halaman catatan piket</title>
  <style>
    body { font-family: sans-serif; margin: 0 auto; max-width: 36rem; padding: 0 1rem; }
    nav { display: flex; gap: 12px; background: #e8eaf6; padding: 8px; }
    .kartu { border: 1px solid #bbb; border-radius: 4px; padding: 0.5rem 0.75rem; margin: 1rem 0; }
    .bilah { height: 12px; background: #c8e6c9; border-radius: 6px; }
    .isi-bilah { height: 12px; width: 60%; background: #2e7d32; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- dua nav dibedakan oleh nama aksesibelnya -->
  <nav aria-label="Navigasi utama">
    <a href="/jadwal">Jadwal</a>
    <a href="/arsip">Arsip</a>
  </nav>

  <main>
    <h1>Catatan piket kelas</h1>

    <!-- aria-labelledby merujuk judul yang sudah terlihat -->
    <section class="kartu" aria-labelledby="judul-rangkuman">
      <h2 id="judul-rangkuman">Rangkuman minggu ini</h2>
      <p>Tiga hari piket terlaksana dan satu hari diganti jadwalnya.</p>
      <!-- tombol ikon tanpa teks memakai aria-label -->
      <button type="button" aria-label="Tutup rangkuman">×</button>
    </section>

    <!-- peran dan properti ARIA untuk widget tanpa padanan native -->
    <div class="bilah" role="progressbar" aria-label="Progres tugas piket"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <div class="isi-bilah"></div>
    </div>
  </main>
</body>
</html>

Kesalahan umum#

Menambahkan peran yang sudah ada secara bawaan. Markup seperti <button role="button"> tidak memberikan informasi baru, tetapi menambah beban pembacaan dan menimbulkan risiko ketidakcocokan antara peran yang tertulis dan elemennya. Hapus peran yang sama dengan peran implisit elemennya.

Meletakkan aria-label pada elemen tanpa peran. Atribut ini diproses pada elemen yang memiliki peran, baik peran bawaan maupun peran dari atribut role. div tanpa peran tidak membaca aria-label-nya, sehingga teks itu hilang begitu saja. Beri peran yang tepat atau gunakan elemen native.

Membuat widget ARIA tanpa mengurus papan ketik. Menambahkan role="button" pada div tanpa tabindex dan tanpa penanganan Enter serta spasi menghasilkan tombol yang tidak dapat diaktifkan pengguna papan ketik. Tinjau kembali tabel perbandingan pada bagian aturan pertama sebelum memilih jalan ARIA.

Ringkasan#

• ARIA adalah lapisan semantik tambahan yang mengubah isi pohon aksesibilitas tanpa mengubah tampilan maupun perilaku bawaan browser.
• Aturan pertama ARIA mengutamakan elemen HTML native, karena elemen native membawa semantik, fokus, dan dukungan papan ketik sekaligus.
• Atribut ARIA terbagi menjadi peran untuk identitas, properti untuk sifat yang stabil, dan status untuk kondisi yang berubah.
• aria-label memberi nama berupa teks langsung, sedangkan aria-labelledby merujuk teks yang sudah terlihat, dan keduanya menimpa nama bawaan elemen.

Referensi#

• ARIA Authoring Practices Guide, Read Me First — W3C WAI — Memuat aturan pertama ARIA beserta ringkasan praktik pemakaiannya.
• WAI-ARIA basics — MDN Web Docs — Pengantar ARIA beserta contoh peran dan propertinya.
• ARIA Overview — MDN Web Docs — Daftar peran, properti, dan status ARIA beserta status dukungannya.
• Providing Accessible Names and Descriptions — W3C WAI — Teknik menyusun nama aksesibel dengan aria-label dan aria-labelledby.