Menyembunyikan dan memperbarui konten

Menyembunyikan konten dari teknologi pendukung

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

aria-hidden

Teknik penting lainnya dalam penyempurnaan pengalaman untuk pengguna teknologi pendukung antara lain memastikan bahwa hanya bagian halaman yang relevan yang diekspos ke teknologi pendukung. Ada beberapa cara untuk memastikan bahwa 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 secara visual tidak dirender, 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 disembunyikan.

Lihat artikel WebAIM ini tentang Teknik untuk menyembunyikan teks untuk informasi selengkapnya tentang cara membuat teks "khusus pembaca layar".

Terakhir, ARIA menyediakan mekanisme untuk mengecualikan konten dari teknologi dukungan yang tidak disembunyikan secara visual, menggunakan atribut aria-hidden. Menerapkan atribut ini ke elemen secara efektif akan 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 halaman utama. Dalam hal ini, pengguna yang berpenglihatan normal mungkin akan 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. Dalam hal ini, seperti halnya membuat jebakan keyboard yang dijelaskan sebelumnya, Anda perlu memastikan bahwa bagian-bagian halaman yang saat ini berada di luar cakupan juga berupa aria-hidden.

Setelah Anda memahami dasar-dasar ARIA, cara memainkannya dengan semantik HTML native, dan cara menggunakannya untuk melakukan pembedahan yang cukup besar pada hierarki aksesibilitas serta mengubah semantik elemen tunggal, mari kita lihat cara menggunakannya untuk menyampaikan informasi yang sensitif terhadap waktu.

aria-live

aria-live memungkinkan developer menandai bagian halaman sebagai "live" dalam arti bahwa pembaruan harus segera dikomunikasikan kepada pengguna, terlepas dari posisi halaman, bukan hanya saat mereka menjelajahi bagian halaman tersebut. Jika elemen memiliki atribut aria-live, bagian halaman yang berisinya dan turunan elemen tersebut disebut area aktif.

ARIA live menetapkan region yang selalu diperbarui.

Misalnya, area aktif dapat berupa pesan status yang muncul sebagai hasil dari tindakan pengguna. Jika pesan tersebut cukup penting untuk menarik perhatian pengguna yang berpenglihatan normal, berarti cukup penting untuk mengarahkan perhatian pengguna teknologi pendukung ke pesan tersebut dengan menyetel atribut aria-live-nya. Bandingkan div biasa ini

<div class="status">Your message has been sent.</div>

dengan pasangan "live"-nya.

<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 memperingatkan pengguna tentang perubahan ini setelah menyelesaikan apa pun yang sedang dilakukannya. Cocok sekali digunakan jika ada sesuatu yang penting, tetapi tidak mendesak, dan merupakan alasan untuk mayoritas penggunaan aria-live.
  • aria-live="assertive" memberi tahu teknologi pendukung untuk menginterupsi apa pun yang sedang dilakukannya dan segera memperingatkan pengguna mengenai perubahan ini. Ini hanya untuk pembaruan penting dan mendesak, seperti pesan status seperti "Terjadi error server dan perubahan Anda tidak disimpan; harap muat ulang halaman", atau pembaruan pada kolom input sebagai hasil langsung dari tindakan pengguna, seperti tombol pada widget stepper.
  • aria-live="off" memberi tahu teknologi pendukung untuk menangguhkan sementara gangguan aria-live.

Ada beberapa trik untuk memastikan live-region Anda berfungsi dengan benar.

Pertama, region aria-live Anda mungkin harus ditetapkan dalam pemuatan halaman awal. Ini bukan aturan mutlak, tetapi jika Anda mengalami kesulitan dengan region aria-live, hal ini mungkin menjadi masalah.

Kedua, pembaca layar yang berbeda akan bereaksi berbeda terhadap berbagai jenis perubahan. Misalnya, Anda dapat memicu pemberitahuan di beberapa pembaca layar dengan mengubah gaya hidden elemen turunan dari true ke false.

Atribut lain yang berfungsi dengan aria-live membantu Anda menyesuaikan apa yang dikomunikasikan kepada pengguna saat wilayah aktif berubah.

aria-atomic menunjukkan apakah seluruh region harus dianggap sebagai satu kesatuan 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, isi lengkap 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, yang berarti bahwa setiap elemen yang ditambahkan ke area aktif signifikan. Misalnya, menambahkan span ke log pesan status yang ada berarti span tersebut akan diumumkan kepada pengguna (dengan asumsi bahwa aria-atomic adalah false).
  • text, yang berarti konten teks yang ditambahkan ke node turunan apa pun relevan. Misalnya, mengubah properti textContent kolom teks kustom akan membacakan teks yang dimodifikasi kepada pengguna.
  • removals, yang berarti penghapusan teks atau node turunan harus disampaikan kepada pengguna.
  • all, yang berarti semua perubahan adalah relevan. Namun, nilai default untuk aria-relevant adalah additions text, yang berarti jika Anda tidak menentukan aria-relevant, pengguna akan diberi tahu tentang penambahan apa pun pada elemen, yang kemungkinan besar merupakan hal yang memang Anda inginkan.

Terakhir, aria-busy memungkinkan Anda memberi tahu teknologi pendukung agar untuk sementara mengabaikan perubahan pada elemen, misalnya saat ada sesuatu yang sedang dimuat. Setelah semuanya diterapkan, aria-busy harus disetel ke false untuk menormalkan operasi pembaca.