Accessibility

Useful links

• https://www.w3.org/Translations/WCAG20-ru/
• http://www.clarissapeterson.com/2012/11/html5-accessibility/
• http://www.webstandards.org/learn/tutorials/accessible-forms/beginner/
• http://habrahabr.ru/post/149815/
• http://habrahabr.ru/post/263349/
• http://habrahabr.ru/post/263613/
• http://www.washington.edu/accessibility/web/tools-and-resources/
• https://habrahabr.ru/company/yandex/blog/258477/

План

• Семантика (html5 tags, headings, nav, attributes)
• ARIA & role
• design (errors)
• testing tools

Ограничения

• Зрение (спепота, ослабленное зрение, дальтонизм)
• Слух
• Опорно-двигательный аппарат
• Психические расстройства (дислексия)
• Медленный интернет

как мы можем повлиять?

Разметка

Semantic HTML:

1. семантические теги
2. атрибуты  - alt
3. img где нужно

4. Video & Audio controls

5. keyboard navigation & semantics

WAI-ARIA (Accessible Rich Internet Applications Suite)

<header role=”banner”>
...
</header>

Forms

• Labels
• Errors (цвета ошибок)
• Required Fields (aria-required="true")
• Input Types

• Input Patterns

Testing

• https://en.wikipedia.org/wiki/List_of_screen_readers
• http://wave.webaim.org/
• http://achecker.ca/checker/index.php
• https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/
• addons