Menyembunyikan dan memperbarui konten

Menyembunyikan konten dari teknologi pendukung

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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.

ARIA live menetapkan region live.

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 penggunaan aria-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 gangguan aria-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 adalah false).
  • 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 adalah additions text, yang berarti jika Anda tidak menentukan aria-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.