W3C standards for Rich internet applications: Accessibility / WAI Aria
description
Transcript of W3C standards for Rich internet applications: Accessibility / WAI Aria
WAI Aria
Что это?Web Accessibility Initiative - Accessible Rich Internet Applications –
(Candidate recommendation, 2011)Инициатива по повышению доступности интернетприложений – Доступные интернет-приложения c
расширенными возможностями.
Разработчики всё чаще используют элементы интерфейса, которые расширяют и переназначают функции HTML.
- Часто используются асинхронные механизмы обновления, при которых страницы обновляются частично (ajax) (все это и есть Rich Internet applications).
Эти элементы часто создают проблемы для пользователей голосовых программ и контроллеров, отличных от мыши.
Что это?
• WAI-ARIA позволяет декларировать элементы и страницы как динамические приложенияа не статичные документы.
• Добавляются значения: роль (role), значение (property), и состояние (state).
• Добавляются семантические описания и другие виды мета-данных, которые помогают распознать цель и назначение контролов и элементов.
Пример: меню можно заявить как элемент NAVIGATION и состояние как свёрнутое или развёрнутое (expanded / collapsed)
Правильно
<div role="banner"> ... </div>
<div role="navigation"> ... </div>
<div role="main"> ... </div>
Правильно
<ul role="navigation">
<li href="downloads">Downloads</li>
<li href="docs">Documentation</li>
<li href="news">News</li>
</ul>
http://www.w3.org/TR/xhtml-role/
Правильно
<ul role="navigation">
<li href="downloads">Downloads</li>
<li href="docs">Documentation</li>
<li href="news">News</li>
</ul>
• http://www.w3.org/TR/xhtml-role/
Неправильно
<p>Согласны с утверждением?
<span role="checkbox">Да</span>
<span role="checkbox">Нет</span>
</p>
• http://www.w3.org/TR/xhtml-role/
Live регионы
<ul aria-live="off"> (Нет живых апдейтов. По умолчанию.)
< ul aria-live="polite" > (регион заберёт фокус после того, как юзер закончит свои действия)
< ul aria-live="assertive" > (регион забирает фокус немедленно, прерывая пользователя)
Общие рекомендации
- Не заменяйте дефолтные элементы по возможности
- Помните о фокусе! Продумывайте, как пользователь может пользоваться вашей страницей/сайтом без мышки (пример- Фликр)
- Продумывайте tabindex – регионы, которым можно присваивать фокус без мышки. В т.ч. можно использовать скриптовые негативные значения.
Общие рекомендации
- Проверяйте контраст на странице- Ссылки и функции должны работать вне контекста
(а не «читать дальше»…)- Субтитры и ALT (также в залинкованных IMG)- Используйте <label> для описания элементов- Используйте иерархию в текстах Н1 Н2 Н3…- Проверьте со старыми браузерами, используйте
фолбэки: http://www.w3.org/TR/wai-aria/roles#presentation
Поддержка
• Browsers:
• Ie8+,FF 2+, Chrome 4+, Safari 4+, Safari 3.2+, Opera 9.5+
http://caniuse.com/wai-aria
Javascript toolkits:
• Jquery (partial support, 1.x, full support promised in 2.x)
Links
• http://www.webhostinghub.com/support/by/edu/introduction-to-wai-aria-be
• http://webaim.org/resources/quickref/#principleshttp://www.w3.org/TR/wai-aria/roles#presentationhttp://accessibility.ru/
• http://caniuse.com/wai-aria