Pengantar ARIA dan semantik HTML non-native
Sejauh ini, kami telah mendorong penggunaan elemen HTML native karena dapat memberikan fokus, dukungan keyboard, dan semantik bawaan, namun ada kalanya tata letak sederhana dan HTML native tidak dapat membantu. Misalnya, saat ini tidak ada elemen HTML standar untuk konstruksi UI yang sangat umum, menu pop-up. Juga tidak ada elemen HTML yang memberikan karakteristik semantik, seperti "pengguna perlu mengetahui hal ini sesegera mungkin".
Pada pelajaran ini, kita akan mempelajari cara mengekspresikan semantik yang tidak dapat dinyatakan oleh HTML.
Spesifikasi Web Accessibility Initiative's Accessible Rich Internet Applications (WAI-ARIA, atau cukup ARIA) cocok untuk menjembatani area dengan masalah aksesibilitas yang tidak dapat dikelola dengan HTML native. Fitur ini memungkinkan Anda menentukan atribut yang mengubah cara elemen diterjemahkan ke dalam hierarki aksesibilitas. Mari kita lihat sebuah contoh.
Dalam cuplikan berikut, kita menggunakan item daftar sebagai jenis kotak centang kustom. Kelas "checkbox" CSS memberikan karakteristik visual yang diperlukan ke elemen.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
Meskipun berfungsi dengan baik untuk pengguna berpenglihatan normal, pembaca layar tidak akan memberikan indikasi bahwa elemen tersebut dimaksudkan sebagai kotak centang, sehingga pengguna yang memiliki gangguan penglihatan mungkin melewatkan elemen tersebut sama sekali.
Namun, dengan menggunakan atribut ARIA, kita dapat memberikan informasi yang hilang ke elemen tersebut
sehingga pembaca layar dapat menafsirkannya dengan benar. Di sini, kami menambahkan atribut role dan
aria-checked untuk mengidentifikasi elemen secara eksplisit sebagai kotak centang dan
menetapkan bahwa elemen tersebut dicentang secara default. Item daftar sekarang akan ditambahkan ke
hierarki aksesibilitas dan pembaca layar akan melaporkannya dengan benar sebagai kotak centang.
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA bekerja dengan mengubah dan menambah hierarki aksesibilitas DOM standar.
Meskipun ARIA memungkinkan kita memodifikasi secara halus (atau bahkan secara radikal) pohon aksesibilitas untuk elemen apa pun di halaman, hanya itu yang berubah. ARIA tidak meningkatkan perilaku yang melekat pada elemen apa pun; dan tidak akan membuat elemen tersebut dapat difokuskan atau memberinya pemroses peristiwa keyboard. Itu masih merupakan bagian dari tugas pengembangan kami.
Penting untuk dipahami bahwa semantik default
tidak perlu ditentukan ulang. Terlepas dari penggunaannya, elemen <input type="checkbox"> HTML standar tidak memerlukan atribut ARIA tambahan role="checkbox" untuk diumumkan dengan benar.
Perlu juga diperhatikan bahwa elemen HTML tertentu memiliki batasan terkait peran dan atribut ARIA
yang dapat digunakan pada elemen tersebut. Misalnya, mungkin tidak ada peran/atribut tambahan yang diterapkan pada elemen <input
type="text"> standar.
Lihat spesifikasi ARIA di HTML untuk informasi selengkapnya.
Mari kita lihat kemampuan lain yang ditawarkan ARIA.
Apa yang dapat dilakukan ARIA?
Seperti yang Anda lihat pada contoh kotak centang, ARIA dapat memodifikasi semantik elemen yang ada atau menambahkan semantik ke elemen yang tidak memiliki semantik bawaan. Elemen ini juga dapat menyatakan pola semantik yang tidak ada sama sekali di HTML, seperti menu atau panel tab. Sering kali, ARIA memungkinkan kita membuat elemen berjenis widget yang tidak akan terwujud dengan HTML biasa.
- Misalnya, ARIA dapat menambahkan label dan teks deskripsi tambahan yang hanya
ditampilkan ke API teknologi pendukung.
<button aria-label="screen reader only label"></button>
- ARIA dapat menyatakan hubungan semantik antarelemen yang memperluas koneksi induk/turunan standar, seperti scrollbar kustom yang mengontrol region tertentu.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- Dan ARIA dapat membuat bagian laman "aktif", sehingga segera menginformasikan teknologi pendukung saat bagian tersebut berubah.
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
Salah satu aspek inti dari sistem ARIA adalah kumpulan perannya. Peran
dalam istilah aksesibilitas setara dengan indikator singkat untuk pola UI
tertentu. ARIA menyediakan kosakata pola yang bisa kita gunakan melalui atribut role
pada elemen HTML apa pun.
Saat menerapkan role="checkbox" dalam contoh sebelumnya, kita memberi tahu
teknologi pendukung bahwa elemen harus mengikuti pola "kotak centang". Artinya, kami menjamin bahwa status tersebut akan dicentang (baik dicentang maupun tidak
dicentang), dan bahwa status tersebut dapat diubah-ubah menggunakan mouse atau spasi,
sama seperti elemen kotak centang HTML standar.
Faktanya, karena fitur interaksi keyboard sangat terlihat dalam penggunaan pembaca
layar, sangat penting untuk memastikan bahwa, saat membuat widget kustom, atribut
role selalu diterapkan di tempat yang sama dengan atribut
tabindex; hal ini memastikan bahwa peristiwa keyboard pergi ke tempat yang tepat dan bahwa saat
fokus membuka elemen, perannya disampaikan secara akurat.
Spesifikasi ARIA menjelaskan
taksonomi nilai yang memungkinkan untuk atribut role dan atribut ARIA
terkait yang dapat digunakan bersama dengan peran tersebut. Ini adalah sumber informasi definitif terbaik tentang bagaimana peran dan atribut ARIA bekerja sama dan bagaimana keduanya dapat digunakan dengan cara yang didukung oleh browser dan teknologi pendukung.
Namun, spesifikasinya sangat padat; tempat yang lebih mudah untuk memulai adalah dokumen URIA Authoring Practices, yang mempelajari praktik terbaik untuk menggunakan peran dan properti ARIA yang tersedia.
ARIA juga menawarkan peran penanda yang memperluas opsi yang tersedia di HTML5. Lihat spesifikasi Landmark Roles Design Patterns untuk informasi selengkapnya.