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