Menyembunyikan dan memperbarui konten

Menyembunyikan konten dari teknologi pendukung

Alice Boxhall

Dave Gash

Meggin Kearney

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.

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 Penggunaan aria-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 sementara aria-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 adalah false).
• 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 adalah additions text, artinya jika Anda tidak menentukan aria-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.