Односторінкові програми становлять значну проблему доступності, коли йдеться про передачу змін у поданні. Без оновлення сторінки екранні зчитувачі не сприймають ці важливі зміни користувальницького інтерфейсу, залишаючи користувачів із вадами зору розгубленими та не підозрюючими.
Одним із рішень є створення повідомлення на основі заголовка сторінки та використання активного регіону ARIA для явного повідомлення через корисне повідомлення про завантаження нового подання. Спочатку створіть функцію, яка викликається при оновленні viewContent. Для цього AngularJS надає подію $ viewContentLoaded. У коді контролера прослухайте подію та викличте функцію (у CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ on '$ viewContentLoaded', identify_view_loaded
За допомогою функції identify_view_loaded оновіть заголовок сторінки та оголосіть повідомлення. Хоча односторінкові фреймворки не оновлюють автоматично заголовки сторінок, синхронізація заголовка сторінки з поточним поданням покращує розуміння користувачами подання.
Один із способів зробити це - використовувати атрибут даних десь у поданні для зберігання заголовка подання:
document.title = $ (’[data-viewtitle]’). data ‘viewtitle’
Тепер створіть повідомлення, використовуючи оновлений заголовок сторінки, та оголосіть його:
$ .announce (document.title + ’, перегляд завантажений’)
$ .announce () - це функція jQuery, яка використовує єдину невидиму область в реальному часі для оголошення вмісту. Цей підхід сприяє спрощенню коду та зусиль щодо налагодження порівняно з тимчасовим використанням живих регіонів. Однак є кілька найкращих практик, які слід пам’ятати.
По-перше, створіть на своїй сторінці єдиний живий регіон «диктора», щоб повідомляти про вміст за допомогою aria-live = "ввічливого | напористого". Не використовуйте будь-які інші живі регіони, включаючи ролі живих регіонів (наприклад, role = "alert | timer | log"). Приклад живого регіону:
div aria-live = "ввічливий" id = "анонсер"> (Текст, доданий або оновлений тут, буде оголошено) / div>
По-друге, очистіть вміст живої області незабаром після оновлення вмісту. Це запобігає натрапення користувачів на старі повідомлення.
Нарешті, як і у будь-якій техніці доступності, використовуйте $ .announce () з розумом. Він повинен використовуватися лише для передачі значних оновлень інтерфейсу.
Слова: Патрік Фокс
Патрік Фокс - директор з технологій веб-інтерфейсу в Razorfish в Остіні. Ця стаття спочатку з’явилася у номері 271 журналу net.
Сподобалось? Прочитайте це!
- Посібник дизайнера з цифрової доступності
- Найкращі безкоштовні шрифти для скриптів
- Безкоштовний вибір шрифтів графіті
