1. Онлайн-кинотеатр
для слабовидящих
на WordPress:
практическая доступность
Анна Ладошкина
ТЕПЛИЦА СОЦИАЛЬНЫХ ТЕХНОЛОГИЙ
WordCamp Russia, Москва, 2015
#a11y

2. Информационный ресурс
http://te-st.ru
Неформальные мероприятия
по ИТ-тематике
Консультации для НКО в сфере ИТ
Разработка собственных
инструментов и приложений
Теплица социальных технологий
Анна Ладошкина
руководитель направления
помощи НКО

3. Сайт в скринридере
для тотально слепого человека
<img alt="IMG_456756_345"…>
<a href="…">Нажмите сюда</a>
<img alt="милый котик"…>
<a href="…">Чем кормить котика</a>

4. Поиск ссылок для человека
с цветовой слепотой
Мы предлагаем интересные книги
Захватывающее чтение для больших и маленьких
Мы предлагаем интересные книги
Захватывающее чтение для больших и маленьких

5. Экранное увеличение

6. Экранное увеличение:
бонус за адаптивный дизайн

7. ⠵⠁⠟⠑⠍⠢

8. + тифлокомментирование =

9. Миф # 1
Слабовидящие люди
самостоятельно
Интернетом не пользуются

10. Кто такие слабовидящие
с точки зрения UX
по данным: Всероссийского общества слепых, Минздрава РФ, ВОЗ
инвалиды
по зрению
расстройства
цветовосприятия
280
тыс.чел
до 8%
населения
возрастные и
другие проблемы
со зрением
до 10 млн. чел

11. Пример сайта специально
адаптированного для слабовидящих
http://аоао.рф

12. Ассистивные технологии
- тактильные дисплеи
- скринридеры (и голосовое управление)
- средства экранного увеличения
фото: User:Lgd

13. WCAG 2.0
WAI-ARIA
http://www.w3.org/TR/WCAG20/
http://www.w3.org/WAI/intro/aria

14. WordPress Accessibility Team
https://make.wordpress.org/accessibility/

15. Контраст
- не полагаться только на цвет
- уровень контраста между текстом и фоном
- инструмент тестирования на этапе дизайна

17. Композиция страницы
- одна колонка
- адаптивный дизайн
- относительные
пропорции
- минимум
«визуального шума»

18. Содержание страницы
- осмысленные заголовки и ссылки
- текстовое описание для ВСЕГО
- короткие внятные тексты без ошибок
<img alt="IMG_456756_345"…>
Х

19. Навигация с клавиатуры
- доступность элементов управления с клавиатуры
- зримое изменение состояния (не только цвет)

20. Специальные приемы
- текст для скринридеров
- ссылки пропустить навигацию
- роли для областей - aria-roles
<a class="more-link" href="http://svettiflo.ru/pokaz-kinofilma/">
<span class="screen-reader-text">
Продолжить чтение — Показ кинофильма
</span>
<span class="meta-nav" aria-hidden="true">[→]</span>
</a>

21. Тестирование
автоматическое + пользовательское
Скринридеры
Онлайн-чекеры
Встроенные инструменты
NVDA (Win)
VoiceOver (Mac)
http://wave.webaim.org/
http://achecker.ca/checker/index.php
http://www.w3.org/WAI/ER/tools/
http://mzl.la/1xb6VYr
http://bit.ly/1EK9YIo
http://bit.ly/1h6dQ0X

22. С чего начать?
улучшить работающий пример
https://github.com/wpaccessibility/a11ythemepatterns
https://github.com/Teplitsa/svet
СВЕТ
https://wordpress.org/themes/tags/accessibility-ready/
Accessibility ready
Accessibility Theme Patterns

23. Вот если бы все сайты были доступными
фото: Kelli Gaskill

24. https://te-st.ru
#a11y
Будем на связи!
Анна Ладошкина
ТЕПЛИЦА СОЦИАЛЬНЫХ ТЕХНОЛОГИЙ
https://www.facebook.com/anna.ladoshkina