WAI-ARIA ( Web Accessibility Initiative - Accessible Rich Internet Applications ) adalah suatu cara agar konten web dan aplikasi web lebih dapat diakses oleh assistive technology (teknologi pendamping) seperti perangkat-perangkat yang digunakan orang cacat untuk mengakses web. Saat ini HTML masih belum ramah untuk assistive technology karena terbatasnya kemampuan HTML. Untuk membuat web benar-benar interaktif dengan pengguna, kita pasti harus banyak menggunakan javascript. Empat masalah yang menghalangi assistive technology untuk bekerja dengan aplikasi javascript:

1. Fungsi komponen yang tidak jelas
2. State dan properti komponen tidak jelas
3. Perubahan konten tidak terdeteksi
4. Aksesibilitas keyboard yang buruk

Cara menggunakan ARIA pada HTML dengan menambahkan atribut tambahan ke tag HTML. Tambahan atribut tersebut membuat perangkat assistive technology dapat mengenali properti, relationship dan state dari user interface.

Bagaimana ARIA dapat membuat HTML lebih ramah untuk perangkat AT?

1. Fungsi komponen yang jelas dengan atribut role

ARIA menyediakan banyak jenis role untuk digunakan.

Pada Bootstrap menggunakan daftar tidak terurut (unordered list) untuk membuat tab navigasi. Agar komponen unordered list berperan sebagai tab navigasi, digunakan atribut role="tablist", role="tab" dan role="tabpanel".

<ul class="nav nav-tabs" id="myTab" role="tablist">
 <li class="nav-item">
  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
 </li>
</ul>
<div class="tab-content" id="myTabContent">
 <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <p>Welcome!</p>
 </div>
 <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  <p>My Profile</p>
 </div>
 <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  <p>Contact me</p>
 </div>
</div>

2. State dan properti komponen

Untuk membuat koneksi antara role="tab" dengan role="tabpanel" digunakan properti aria-controls dan aria-labelledby. Properti aria-controls digunakan untuk mengetahui elemen yang dikontrol dan properti aria-labelledby untuk mengetahui elemen yang bertindak sebagai label untuk elemen tersebut. Perlu diperhatikan bahwa nilai properti aria-labelledby dan aria-labelledby adalah nilai atribut id elemen tujuan.

Untuk mengetahui tab mana yang aktif atau tidak aktif (state komponen), digunakan properti aria-selected. Jika tab aktif maka properti aria-selected bernilai true. Jika tab tidak aktif maka properti aria-selected bernilai false.

<ul class="nav nav-tabs" id="myTab" role="tablist">
 <li class="nav-item">
  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
 </li>
 <li class="nav-item">
  <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
 </li>
</ul>
<div class="tab-content" id="myTabContent">
 <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <p>Welcome!</p>
 </div>
 <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  <p>My Profile</p>
 </div>
 <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  <p>Contact me</p>
 </div>
</div>

3. Mendeteksi perubahan konten

Dengan menggunakan properti aria-live, aria-atomic dan aria-relevant, perangkat AT dapat mendeteksi perubahan pada konten yang terjadi.

Terdapat 3 nilai untuk properti aria-live:

1. aria-live="off" merupakan nilai default jika properti aria-live tidak dibuat. Perubahan yang terjadi pada konten tidak akan diberitahu
2. aria-live="polite", perubahan konten akan diberitahu setelah pengguna tidak melakukan aktivitas terhadap konten lagi.
3. aria-live="assertive", perubahan konten langsung diberitahu.

Nilai properti aria-atomic:

1. aria-atomic="true", jika pada elemen <p> terdapat properti tersebut maka jika pada paragraf terjadi perubahan satu atau lebih kata, perangkat AT akan memberitahu lagi mulai dari awal paragraf
2. aria-atomic="false", jika pada elemen <p> terdapat properti tersebut maka jika pada paragraf terjadi perubahan satu atau lebih kata, perangkat AT tidak akan memberitahu dari awal paragraf tapi hanya kata yang berubah saja

Nilai properti aria-relevant:

1. aria-relevant="additions", perangkat AT akan memberitahu pengguna jika terjadi penambahan elemen pada daerah elemen yang memiliki properti tersebut
2. aria-relevant="removals", perangkat AT akan memberitahu pengguna jika terjadi penghapusan elemen pada daerah elemen yang memiliki properti tersebut
3. aria-relevant="text", perangkat AT akan memberitahu pengguna jika terjadi perubahan teks pada daerah elemen yang memiliki properti tersebut
4. aria-relevant="all", perangkat AT akan memberitahu pengguna jika terjadi penambahan elemen, penghapusan elemen dan perubahan teks pada daerah elemen yang memiliki properti tersebut

Secara default properti aria-relevant bernilai aria-relevant="text additions".

4. Meningkatkan aksesibitas keyboard

Pada HTML4, elemen-elemen yang bisa mendapat fokus dari tombol tab keyboard hanya elemen untuk hyperlink dan untuk form.

Pada HTML5, tiap elemen bisa mendapat fokus dari tombol tab keyboard dengan mendeklarasikan atribut tabindex. Jika atribut tabindex bernilai lebih kecil dari 0 maka tidak akan mendapat fokus dari tab keyboard.

Tutorial ARIA - Alert