Menyembunyikan konten dari teknologi pendukung
aria disembunyikan
Teknik penting lainnya dalam menyempurnakan pengalaman untuk asistif pengguna teknologi harus memastikan bahwa hanya bagian laman yang relevan yang terpapar teknologi pendukung. Ada beberapa cara untuk memastikan bahwa suatu bagian DOM tidak diekspos ke API aksesibilitas.
Pertama, apa pun yang secara eksplisit disembunyikan dari DOM juga tidak akan disertakan
di pohon aksesibilitas. Jadi, apa pun yang memiliki gaya CSS visibility:
hidden
atau display: none
atau menggunakan atribut hidden
HTML5 juga akan
tersembunyi dari pengguna
teknologi pendukung.
Namun, elemen yang tidak dirender secara visual tetapi tidak disembunyikan secara eksplisit adalah masih termasuk dalam hierarki aksesibilitas. Salah satu teknik yang umum adalah dengan 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;
}
Seperti yang telah kita lihat, kita bisa menyediakan teks khusus pembaca layar melalui
Atribut aria-label
, aria-labelledby
, atau aria-describedby
yang mereferensikan suatu
yang tersembunyi.
Lihat artikel WebAIM tentang Teknik untuk bersembunyi teks untuk informasi selengkapnya tentang cara membuat "pembaca layar saja" teks.
Terakhir, ARIA menyediakan mekanisme untuk mengeluarkan konten dari
teknologi yang tidak disembunyikan secara visual, menggunakan atribut aria-hidden
.
Menerapkan atribut ini ke elemen akan efektif menghapusnya dan semua
turunan 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 laman utama. Dalam hal ini, pengguna yang 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 ke bagian lain
halaman. Dalam kasus ini, selain membuat jebakan keyboard, dijelaskan
sebelumnya,
Anda perlu memastikan bahwa bagian laman
yang saat ini berada di luar cakupan
juga aria-hidden
.
Setelah Anda memahami dasar-dasar ARIA, cara kerjanya dengan HTML native semantik, dan bagaimana hal itu dapat digunakan untuk melakukan operasi yang cukup besar pada aksesibilitas serta mengubah semantik dari satu elemen, mari kita lihat bagaimana kita dapat menggunakannya untuk menyampaikan informasi mendesak.
aria-live
aria-live
memungkinkan developer menandai bagian halaman sebagai "aktif" karena segala sesuatunya
pembaruan harus segera dikomunikasikan kepada pengguna, terlepas dari halaman
alih-alih jika mereka hanya menjelajahi bagian laman tersebut. Kapan
elemen memiliki atribut aria-live
, bagian dari halaman yang berisi elemen tersebut dan
turunannya disebut area aktif.
![Live stream ARIA menetapkan wilayah live.](https://web.dev/static/articles/hiding-and-updating-content/image/aria-live-establishes-li-acc61d8956fc7.jpg?authuser=19&hl=id)
Misalnya, wilayah langsung mungkin berupa pesan status yang muncul sebagai hasil
tindakan pengguna. Jika pesan tersebut cukup penting untuk
menangkap pesan pengguna yang normal,
penting untuk mengarahkan perhatian pengguna
diperhatikan dengan menyetel atribut aria-live
-nya. Bandingkan div
biasa ini
<div class="status">Your message has been sent.</div>
dengan kata "live" kemiripan.
<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"
menggunakan teknologi pendukung untuk memberi tahu pengguna tentang hal ini berubah ketika ia telah menyelesaikan apa pun yang sedang dilakukannya. Sangat bagus untuk menggunakan jika ada sesuatu yang penting tetapi tidak mendesak, dan menjelaskan sebagian besar Penggunaanaria-live
.aria-live="assertive"
memberi tahu teknologi pendukung untuk menginterupsi apa pun lakukan dan segera memperingatkan pengguna tentang perubahan ini. Ini hanya untuk pembaruan penting dan mendesak, seperti pesan status seperti "Ada error server dan perubahan Anda tidak disimpan; muat ulang halaman", atau pembaruan pada bidang input sebagai hasil langsung dari tindakan pengguna, seperti pada widget stepper.aria-live="off"
memberi tahu teknologi pendukung untuk menangguhkan sementaraaria-live
gangguan.
Ada beberapa trik untuk memastikan live region Anda berfungsi dengan benar.
Pertama, region aria-live
Anda mungkin harus ditetapkan pada pemuatan halaman awal.
Ini bukan aturan yang sulit dan cepat, tetapi jika Anda mengalami kesulitan dengan
aria-live
, mungkin inilah masalahnya.
Kedua, pembaca layar yang berbeda bereaksi berbeda terhadap jenis
perubahan. Misalnya, Anda dapat memicu pemberitahuan pada beberapa pembaca layar
dengan mengganti gaya hidden
elemen turunan dari true (benar) ke false (salah).
Atribut lain yang dapat digunakan dengan aria-live
membantu Anda menyesuaikan
dikomunikasikan kepada pengguna saat region aktif berubah.
aria-atomic
menunjukkan apakah seluruh wilayah harus dianggap sebagai
ketika mengkomunikasikan {i>update<i}. Misalnya, jika widget tanggal yang terdiri dari
hari, bulan, dan tahun memiliki aria-live=true
dan aria-atomic=true
, dan pengguna
menggunakan kontrol {i>stepper<i} untuk mengubah nilai satu bulan saja,
widget tanggal akan dibaca lagi. Nilai aria-atomic
dapat berupa 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, artinya setiap elemen yang ditambahkan ke live region
signifikan. Misalnya, menambahkan span ke log status yang ada
akan berarti bahwa durasi akan diumumkan kepada pengguna (dengan asumsi
bahwa
aria-atomic
sebelumnya adalahfalse
). - text, artinya konten teks yang ditambahkan ke node turunan
relevan. Misalnya, mengubah properti
textContent
kolom teks kustom akan membacakan teks yang telah diubah kepada pengguna. - removals, artinya penghapusan teks atau node turunan harus disampaikan kepada pengguna.
- all, artinya semua perubahan akan relevan. Namun, nilai {i>default<i} untuk
aria-relevant
adalahadditions text
, artinya jika Anda tidak menentukanaria-relevant
, kode ini akan memperbarui pengguna untuk penambahan elemen, yaitu hal yang kemungkinan besar Anda inginkan.
Terakhir, aria-busy
memungkinkan Anda memberi tahu teknologi pendukung bahwa hal itu
untuk sementara mengabaikan perubahan pada elemen, misalnya ketika ada sesuatu yang sedang dimuat. Satu kali
semuanya ada di tempatnya, aria-busy
harus disetel ke false untuk menormalisasi
operasi pembaca.