Aplikasi satu halaman menimbulkan cabaran kebolehaksesan yang signifikan ketika menyampaikan perubahan pandangan. Tanpa penyegaran halaman, pembaca skrin tidak mengambil perubahan UI penting ini, menjadikan pengguna yang cacat penglihatan bingung dan tidak menyedari.
Salah satu penyelesaiannya adalah dengan membuat pesan berdasarkan judul halaman, dan memanfaatkan wilayah langsung ARIA untuk secara terang-terangan mengumumkan, melalui pesan bermanfaat, bahawa paparan baru telah dimuat. Pertama buat fungsi yang dipanggil semasa viewContent dikemas kini. AngularJS menyediakan acara $ viewContentLoaded untuk tujuan ini. Dalam kod pengawal, dengarkan acara dan panggil fungsi (di CoffeeScript):
app.controller 'PageController', ($ lingkup, $ lokasi, $ http) -> lingkup $. $ on '$ viewContentLoaded', mengumumkan_lihat_buat
Dalam fungsi mengumumkan_view_loaded, kemas kini tajuk halaman dan umumkan pesannya. Walaupun kerangka satu halaman tidak mengemas kini tajuk halaman secara automatik, menjaga agar halaman tetap diselaraskan dengan paparan semasa akan meningkatkan pemahaman pengguna mengenai paparan tersebut.
Salah satu cara untuk melakukannya adalah dengan menggunakan atribut data di suatu tempat dalam pandangan untuk menyimpan tajuk paparan:
document.title = $ ('[data-viewtitle]'). data 'viewtitle'
Sekarang buat mesej menggunakan tajuk halaman yang dikemas kini, dan umumkan:
$ .announce (document.title + ', view dimuat')
$ .announce () adalah fungsi jQuery yang menggunakan satu kawasan langsung yang tidak kelihatan untuk mengumumkan kandungan. Pendekatan ini membantu mempermudah usaha kod dan penyahpepijatan berbanding dengan penggunaan kawasan hidup secara ad hoc. Walau bagaimanapun, terdapat beberapa amalan terbaik yang perlu diingat.
Pertama, buat satu wilayah 'penyiar' langsung di halaman anda untuk mengumumkan kandungan menggunakan aria-live = "sopan | tegas". Jangan gunakan kawasan langsung lain, termasuk peranan kawasan langsung (mis. Role = "alert | timer | log"). Contoh kawasan langsung:
div aria-live = "sopan" id = "penyiar"> (Teks yang ditambahkan atau dikemas kini di sini akan diumumkan) / div>
Kedua, kosongkan kandungan kawasan langsung setelah mengemas kini kandungannya. Ini menghalang pengguna daripada tersandung pada mesej lama.
Akhirnya, seperti mana-mana teknik kebolehaksesan, gunakan $ .announce () dengan bijak. Ia hanya boleh digunakan untuk menyampaikan kemas kini UI yang penting.
Perkataan: Patrick Fox
Patrick Fox adalah pengarah teknologi Web UI di Razorfish di Austin. Artikel ini pada mulanya muncul dalam edisi 271 majalah bersih.
Suka ini? Baca ini!
- Panduan pereka untuk kebolehcapaian digital
- Fon skrip percuma terbaik
- Pilihan fon grafiti percuma
