Aplikasi satu halaman menimbulkan tantangan aksesibilitas yang signifikan dalam hal mengomunikasikan perubahan tampilan. Tanpa penyegaran halaman, pembaca layar tidak mengambil perubahan UI penting ini, membuat pengguna dengan gangguan penglihatan bingung dan tidak menyadarinya.
Salah satu solusinya adalah membuat pesan berdasarkan judul halaman, dan memanfaatkan wilayah langsung ARIA untuk mengumumkan secara eksplisit, melalui pesan yang membantu, bahwa tampilan baru telah dimuat. Pertama buat fungsi yang dipanggil saat viewContent diperbarui. AngularJS menyediakan acara $ viewContentLoaded untuk tujuan ini. Di kode pengontrol, dengarkan acara dan panggil fungsi (dalam CoffeeScript):
app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, announce_view_loaded
Dalam fungsi announce_view_loaded, perbarui judul halaman dan umumkan pesannya. Meskipun kerangka satu halaman tidak secara otomatis memperbarui judul halaman, menjaga judul halaman tetap sinkron dengan tampilan saat ini akan meningkatkan pemahaman pengguna tentang tampilan tersebut.
Salah satu cara untuk melakukannya adalah dengan menggunakan atribut data di suatu tempat dalam tampilan untuk menyimpan judul tampilan:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Sekarang buat pesan menggunakan judul halaman yang diperbarui, dan umumkan:
$ .announce (document.title + ’, view dimuat’)
$ .announce () adalah fungsi jQuery yang menggunakan satu wilayah langsung yang tidak terlihat untuk mengumumkan konten. Pendekatan ini membantu menyederhanakan upaya kode dan debugging dibandingkan dengan penggunaan ad hoc di wilayah aktif. Namun, ada beberapa praktik terbaik yang perlu diingat.
Pertama, buat satu wilayah langsung 'penyiar' di laman Anda untuk mengumumkan konten menggunakan aria-live = "polite | assertive". Jangan gunakan wilayah langsung lainnya, termasuk peran wilayah langsung (misalnya role = "alert | timer | log"). Contoh live region:
div aria-live = "polite" id = "penyiar"> (Teks ditambahkan atau diperbarui di sini akan diumumkan) / div>
Kedua, hapus konten live region segera setelah mengupdate konten. Ini mencegah pengguna tersandung pada pesan lama.
Terakhir, seperti teknik aksesibilitas lainnya, gunakan $ .announce () dengan bijaksana. Ini hanya boleh digunakan untuk mengkomunikasikan pembaruan UI yang signifikan.
Kata-kata: Patrick Fox
Patrick Fox adalah direktur teknologi UI Web di Razorfish di Austin. Artikel ini pertama kali tayang di majalah net terbitan 271.
Suka ini? Baca ini!
- Panduan desainer untuk aksesibilitas digital
- Font skrip gratis terbaik
- Pemilihan font grafiti gratis
