Menyembunyikan konten dari teknologi pendukung
aria-tersembunyi
Teknik penting lainnya dalam menyesuaikan pengalaman untuk pengguna teknologi pendukung melibatkan memastikan bahwa hanya bagian halaman yang relevan yang diekspos ke teknologi pendukung. Ada beberapa cara untuk memastikan bagian DOM tidak diekspos ke API aksesibilitas.
Pertama, apa pun yang secara eksplisit disembunyikan dari DOM juga tidak akan disertakan
dalam hierarki aksesibilitas. Jadi, apa pun yang memiliki gaya CSS visibility:
hidden
atau display: none
atau menggunakan atribut hidden
HTML5 juga akan
disembunyikan dari pengguna teknologi pendukung.
Namun, elemen yang tidak dirender secara visual tetapi tidak secara eksplisit disembunyikan masih disertakan dalam hierarki aksesibilitas. Salah satu teknik umum adalah menyertakan "teks khusus pembaca layar" dalam elemen yang diposisikan di luar layar secara mutlak.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Selain itu, seperti yang telah kita lihat, Anda dapat menyediakan teks khusus pembaca layar melalui
atribut aria-label
, aria-labelledby
, atau aria-describedby
yang mereferensikan
elemen yang tersembunyi.
Lihat artikel WebAIM ini tentang Teknik untuk menyembunyikan teks untuk mengetahui informasi selengkapnya tentang cara membuat teks "khusus pembaca layar".
Terakhir, ARIA menyediakan mekanisme untuk mengecualikan konten dari teknologi
pendukung yang tidak disembunyikan secara visual, menggunakan atribut aria-hidden
.
Menerapkan atribut ini ke elemen akan secara efektif menghapusnya dan semua
turunannya dari hierarki aksesibilitas. Satu-satunya pengecualian adalah elemen
yang dirujuk oleh atribut aria-labelledby
atau aria-describedby
.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
Misalnya, Anda dapat menggunakan aria-hidden
jika membuat beberapa UI modal yang
memblokir akses ke halaman utama. Dalam hal ini, pengguna yang berpenglihatan normal mungkin melihat semacam
overlay semi-transparan yang menunjukkan bahwa sebagian besar halaman saat ini tidak dapat
digunakan, tetapi pengguna pembaca layar mungkin masih dapat menjelajahi bagian lain
halaman tersebut. Dalam hal ini, selain membuat perangkap keyboard yang dijelaskan
sebelumnya,
Anda juga perlu memastikan bahwa bagian halaman yang saat ini berada di luar cakupan
juga aria-hidden
.
Setelah Anda memahami dasar-dasar ARIA, cara kerjanya dengan semantik HTML native, dan cara penggunaannya untuk melakukan operasi yang cukup besar pada hierarki aksesibilitas serta mengubah semantik satu elemen, mari lihat cara menggunakannya untuk menyampaikan informasi mendesak.
aria-live
aria-live
memungkinkan developer menandai bagian halaman sebagai "aktif" dalam arti bahwa
pembaruan harus segera disampaikan kepada pengguna, terlepas dari posisi
halaman, bukan jika mereka langsung menjelajahi bagian halaman tersebut. Jika elemen memiliki atribut aria-live
, bagian halaman yang memuatnya serta turunannya disebut live region.
Misalnya, live region dapat berupa pesan status yang muncul sebagai hasil dari tindakan pengguna. Jika pesan cukup penting untuk menarik perhatian pengguna
yang mampu melihat, cukup penting untuk mengarahkan perhatian pengguna
teknologi pendukung ke pesan tersebut dengan menetapkan atribut aria-live
-nya. Bandingkan div
biasa ini
<div class="status">Your message has been sent.</div>
dengan pasangan "live".
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
memiliki tiga nilai yang diizinkan: polite
, assertive
, dan off
.
aria-live="polite"
memberi tahu teknologi pendukung untuk memberi tahu pengguna tentang perubahan ini setelah menyelesaikan apa pun yang saat ini dilakukannya. Sangat cocok digunakan jika ada sesuatu yang penting tetapi tidak mendesak, dan memperhitungkan sebagian besar penggunaanaria-live
.aria-live="assertive"
memberi tahu teknologi pendukung untuk menginterupsi apa pun yang dilakukannya dan segera memberi tahu pengguna tentang perubahan ini. Ini hanya untuk pembaruan penting dan mendesak, seperti pesan status seperti "Terjadi error pada server dan perubahan Anda tidak disimpan; muat ulang halaman", atau pembaruan pada kolom input sebagai akibat langsung dari tindakan pengguna, seperti tombol pada widget stepper.aria-live="off"
memberi tahu teknologi pendukung untuk menangguhkan gangguanaria-live
untuk sementara.
Ada beberapa trik untuk memastikan live region Anda berfungsi dengan benar.
Pertama, wilayah aria-live
Anda mungkin harus ditetapkan pada pemuatan halaman awal.
Ini bukan aturan yang sulit dan cepat, tetapi jika Anda mengalami kesulitan dengan region aria-live
, mungkin inilah masalahnya.
Kedua, pembaca layar yang berbeda akan bereaksi secara berbeda terhadap jenis
perubahan yang berbeda. Misalnya, Anda dapat memicu pemberitahuan di beberapa pembaca layar
dengan mengalihkan gaya hidden
elemen turunan dari true (benar) ke false (salah).
Atribut lain yang berfungsi dengan aria-live
membantu Anda menyesuaikan apa yang
dikomunikasikan kepada pengguna saat live region berubah.
aria-atomic
menunjukkan apakah seluruh region harus dianggap sebagai
satu bilangan bulat saat mengomunikasikan pembaruan. Misalnya, jika widget tanggal yang terdiri dari hari, bulan, dan tahun memiliki aria-live=true
dan aria-atomic=true
, dan pengguna menggunakan kontrol stepper untuk mengubah nilai bulan saja, konten lengkap widget tanggal akan dibacakan lagi. Nilai aria-atomic
mungkin true
atau false
(default).
aria-relevant
menunjukkan jenis perubahan yang harus ditampilkan kepada pengguna.
Ada beberapa opsi yang dapat digunakan secara terpisah atau sebagai daftar token.
- additions, yang berarti elemen yang ditambahkan ke live region bersifat signifikan. Misalnya, menambahkan span ke log pesan status yang ada akan berarti bahwa span akan diumumkan kepada pengguna (dengan asumsi bahwa
aria-atomic
adalahfalse
). - text, yang berarti konten teks yang ditambahkan ke node turunan mana pun
yang relevan. Misalnya, mengubah properti
textContent
kolom teks kustom akan membacakan teks yang diubah kepada pengguna. - penghapusan, yang berarti penghapusan teks atau node turunan akan disampaikan kepada pengguna.
- all, yang berarti semua perubahan bersifat relevan. Namun, nilai default untuk
aria-relevant
adalahadditions text
, yang berarti jika Anda tidak menentukanaria-relevant
, nilai tersebut akan memberi tahu pengguna untuk penambahan apa pun ke elemen, yang kemungkinan besar akan Anda inginkan.
Terakhir, aria-busy
memungkinkan Anda memberi tahu teknologi pendukung agar
untuk sementara mengabaikan perubahan pada elemen, seperti saat sesuatu sedang dimuat. Setelah
semuanya siap, aria-busy
harus disetel ke salah (false) untuk menormalisasi
operasi pembaca.