Pengantar ARIA dan semantik HTML non-native
Sejauh ini, kami telah menyarankan penggunaan elemen HTML native karena memberi Anda fokus, dukungan keyboard, dan semantik bawaan, tetapi ada kalanya sebuah dan HTML native tidak akan berfungsi. Misalnya, saat ini tidak ada elemen HTML terstandardisasi untuk konstruksi UI yang sangat umum, menu {i>pop-up<i}. Norwegia apakah ada elemen HTML yang menyediakan karakteristik semantik seperti " pengguna perlu mengetahui tentang hal ini sesegera mungkin".
Dalam pelajaran ini, kita akan mempelajari cara mengekspresikan semantik yang tidak dapat dilakukan HTML mengekspresikannya sendiri.
Aplikasi Internet yang Dapat Diakses dari Inisiatif Aksesibilitas Web spesifikasi (WAI-ARIA, atau hanya ARIA) cocok untuk menjembatani area dengan masalah aksesibilitas yang tidak dapat dikelola dengan HTML native. Cara kerjanya adalah dengan memungkinkan Anda menentukan atribut yang memodifikasi bagaimana suatu elemen diterjemahkan ke dalam pohon aksesibilitas. Mari kita lihat contoh.
Dalam cuplikan berikut, kami menggunakan item daftar sebagai jenis kotak centang kustom. Tujuan "Kotak centang" CSS memberikan elemen karakteristik visual yang diperlukan.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
Meskipun ini berfungsi dengan baik bagi pengguna yang mampu melihat, pembaca layar tidak akan memberikan indikasi elemen itu dimaksudkan untuk menjadi kotak centang, sehingga pengguna dengan gangguan penglihatan mungkin melewatkan elemen secara keseluruhan.
Namun, dengan menggunakan atribut ARIA, kita dapat memberi elemen informasi yang tidak ada
agar pembaca layar dapat
menafsirkannya dengan benar. Di sini, kita telah menambahkan role
dan
atribut aria-checked
untuk mengidentifikasi elemen secara eksplisit sebagai kotak centang dan
untuk menentukan bahwa ini dicentang secara {i>default<i}. 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.
![Hierarki aksesibilitas DOM standar.](https://web.developers.google.cn/static/articles/semantics-aria/image/the-standard-dom-accessib-f1377436c8cbd.jpg?authuser=7&hl=id)
![Hierarki aksesibilitas ditambahkan ARIA.](https://web.developers.google.cn/static/articles/semantics-aria/image/the-aria-augmented-access-a0705fd66fc51.jpg?authuser=7&hl=id)
Meskipun ARIA memungkinkan kita untuk memodifikasi aksesibilitas secara halus (atau bahkan secara radikal) hierarki untuk elemen apa pun di laman, dan hanya hal itu yang berubah. ARIA tidak meningkatkan perilaku inheren elemen apa pun; hal itu tidak akan menentukan dapat difokuskan atau memberinya pemroses peristiwa keyboard. Hal tersebut masih menjadi bagian dari pengembangan aplikasi.
Penting untuk dipahami bahwa {i>default <i}
tidak perlu didefinisikan ulang
semantik. Terlepas dari penggunaannya, <input type="checkbox">
HTML standar
elemen ini tidak memerlukan atribut ARIA tambahan role="checkbox"
untuk
diumumkan dengan benar.
Perlu diperhatikan juga bahwa elemen HTML tertentu memiliki batasan atas ARIA
peran dan atribut dapat digunakan. Misalnya, mungkin tidak ada peran/atribut tambahan yang diterapkan pada elemen <input
type="text">
standar.
Lihat ARIA dalam spesifikasi HTML untuk informasi selengkapnya.
Mari kita lihat kemampuan lain yang ditawarkan ARIA.
Apa yang bisa dilakukan ARIA?
Seperti yang Anda lihat pada contoh kotak centang, ARIA dapat mengubah semantik elemen yang ada atau menambahkan semantik ke elemen yang tidak memiliki semantik bawaan. Ini juga dapat mengekspresikan pola semantik yang tidak ada sama sekali di HTML, seperti menu atau tab . Sering kali, ARIA memungkinkan kita membuat elemen jenis widget yang tidak mungkin dilakukan dengan HTML biasa.
- Misalnya, ARIA dapat menambahkan label dan teks deskripsi tambahan yang hanya
terekspos ke API teknologi pendukung.
<button aria-label="screen reader only label"></button>
- ARIA dapat mengekspresikan hubungan semantik antar elemen yang memperluas koneksi induk/turunan standar, seperti scrollbar kustom yang mengontrol wilayah tertentu.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- Dan ARIA dapat membuat bagian laman menjadi "aktif", sehingga mereka segera memberi tahu teknologi pendukung saat mereka berubah.
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
Salah satu aspek inti sistem ARIA adalah kumpulan peran. Peran
dalam istilah aksesibilitas setara dengan
indikator singkat untuk UI tertentu
pola. ARIA menyediakan kosakata pola yang dapat kita gunakan melalui role
pada elemen HTML apa pun.
Ketika menerapkan role="checkbox"
di contoh sebelumnya, kita memberi tahu
{i>assistive technology<i} (teknologi bantu) di mana elemen harus mengikuti "kotak centang" pola. Bahwa
adalah, kami menjamin bahwa status akan dicentang (baik dicentang maupun tidak
dicentang), dan bahwa status dapat dialihkan
menggunakan {i>mouse<i} atau tombol spasi,
seperti elemen kotak
centang HTML standar.
Faktanya, karena fitur interaksi {i>keyboard<i}
sangat terlihat di pembaca layar
penting untuk memastikan bahwa, saat membuat widget khusus,
Atribut role
selalu diterapkan di tempat yang sama dengan tabindex
; ini memastikan bahwa kejadian {i>keyboard<i} pergi ke tempat yang tepat dan bahwa ketika
fokus mendarat pada elemen yang perannya disampaikan secara akurat.
Spesifikasi ARIA menjelaskan
taksonomi nilai yang mungkin untuk atribut role
dan ARIA terkait
yang dapat digunakan bersama dengan peran-peran tersebut. Ini yang terbaik
sumber informasi definitif tentang cara kerja peran dan atribut ARIA
dapat digabungkan dan bagaimana mereka dapat digunakan
dengan cara yang didukung oleh {i>browser<i} dan
teknologi pendukung.
![Daftar semua peran ARIA yang tersedia.](https://web.developers.google.cn/static/articles/semantics-aria/image/a-list-all-available-ar-64bce9c9d6.jpg?authuser=7&hl=id)
Namun, spesifikasinya sangat padat; tempat yang lebih mudah untuk memulai adalah ARIA Dokumen Praktik Pembuatan , yang mengeksplorasi praktik terbaik untuk menggunakan peran ARIA yang tersedia dan properti baru.
ARIA juga menawarkan peran tempat terkenal yang memperluas opsi yang tersedia dalam HTML5. Lihat Desain Peran Terkenal Pola untuk informasi selengkapnya.