Приложенията с една страница представляват значително предизвикателство за достъпност, когато става въпрос за комуникация на промени в изгледа. Без опресняване на страница, екранните четци не взимат тези важни промени в потребителския интерфейс, оставяйки потребителите с увредено зрение объркани и без да знаят.
Едно от решенията е да се създаде съобщение въз основа на заглавието на страницата и да се използва регион на ARIA на живо, който изрично да обяви чрез полезно съобщение, че е зареден нов изглед. Първо създайте функция, която се извиква, когато viewContent се актуализира. AngularJS предоставя събитие $ viewContentLoaded за тази цел. В кода на контролера чуйте събитието и извикайте функция (в CoffeeScript):
app.controller ‘PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, announce_view_loaded
Във функцията convert_view_loaded актуализирайте заглавието на страницата и съобщете съобщението. Докато рамките от една страница не актуализират автоматично заглавията на страниците, поддържането на заглавието на страницата синхронизирано с текущия изглед подобрява разбирането на потребителите за изгледа.
Един от начините да направите това е да използвате атрибут за данни някъде в изгледа, за да съхраните заглавието на изгледа:
document.title = $ (’[data-viewtitle]’). data ‘viewtitle’
Сега създайте съобщение, като използвате актуализираното заглавие на страницата, и го обявете:
$ .announce (document.title + ’, преглед зареден’)
$ .announce () е функция jQuery, която използва единичен, невидим регион на живо за обявяване на съдържание. Този подход помага за опростяване на кода и усилията за отстраняване на грешки в сравнение с ad hoc използването на живи региони. Има обаче няколко най-добри практики, които трябва да запомните.
Първо, създайте единичен регион на живо за „диктор“ на вашата страница, за да съобщите съдържание, използвайки aria-live = "учтиво | категорично". Не използвайте други живи региони, включително роли на живи региони (напр. Role = "alert | timer | log"). Примерен регион на живо:
div aria-live = "учтив" id = "анонсер"> (Текстът, добавен или актуализиран тук, ще бъде обявен) / div>
Второ, изчистете съдържанието на региона на живо малко след актуализирането на съдържанието. Това предпазва потребителите от препъване при стари съобщения.
И накрая, както при всяка техника за достъпност, използвайте $ .announce () разумно. Той трябва да се използва само за комуникация на значителни актуализации на потребителския интерфейс.
Думи: Патрик Фокс
Патрик Фокс е технологичен директор на уеб потребителския интерфейс в Razorfish в Остин. Тази статия първоначално се появи в брой 271 на нетното списание.
Хареса ли ви това? Прочетете тези!
- Ръководство на дизайнера за цифрова достъпност
- Най-добрите безплатни шрифтове за скриптове
- Безплатен избор на шрифтове за графити
