Практическая доступность с wordpress

Онлайн-кинотеатр для слабовидящихна WordPress: практическая доступность

Анна ЛадошкинаТЕПЛИЦА СОЦИАЛЬНЫХ ТЕХНОЛОГИЙ

WordCamp Russia, Москва, 2015

#a11y

Информационный ресурс http://te-st.ru

Неформальные мероприятия по ИТ-тематике

Консультации для НКО в сфере ИТ

Разработка собственных инструментов и приложений

Теплица социальных технологий

Анна Ладошкина

руководитель направления помощи НКО

Сайт в скринридере для тотально слепого человека

<img alt="IMG_456756_345"…> <a href="…">Нажмите сюда</a>

<img alt="милый котик"…>

<a href="…">Чем кормить котика</a>

Поиск ссылок для человека с цветовой слепотой

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

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

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

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

⠵⠁⠟⠑⠍⠢

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

Миф # 1

Слабовидящие люди самостоятельно

Интернетом не пользуются

Кто такие слабовидящие с точки зрения UX

по данным: Всероссийского общества слепых, Минздрава РФ, ВОЗ

инвалиды по зрению

расстройствацветовосприятия

280 тыс.чел

до 8% населения

возрастные и другие проблемы со зрением

до 10 млн. чел

Пример сайта специально адаптированного для слабовидящих

http://аоао.рф

Ассистивные технологии

- тактильные дисплеи - скринридеры (и голосовое управление) - средства экранного увеличения

фото: User:Lgd

WCAG 2.0WAI-ARIA

http://www.w3.org/TR/WCAG20/http://www.w3.org/WAI/intro/aria

WordPress Accessibility Teamhttps://make.wordpress.org/accessibility/

Контраст

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

Композиция страницы

- одна колонка

- адаптивный дизайн

- относительные пропорции

- минимум «визуального шума»

Содержание страницы

- осмысленные заголовки и ссылки - текстовое описание для ВСЕГО - короткие внятные тексты без ошибок

<img alt="IMG_456756_345"…> Х

Навигация с клавиатуры

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

Специальные приемы

- текст для скринридеров - ссылки пропустить навигацию - роли для областей - 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>

Тестирование

автоматическое + пользовательское

Скринридеры

Онлайн-чекеры

Встроенные инструменты

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

С чего начать? улучшить работающий пример

https://github.com/wpaccessibility/a11ythemepatterns

https://github.com/Teplitsa/svetСВЕТ

https://wordpress.org/themes/tags/accessibility-ready/Accessibility ready

Accessibility Theme Patterns

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

https://te-st.ru

#a11yБудем на связи!

Анна ЛадошкинаТЕПЛИЦА СОЦИАЛЬНЫХ ТЕХНОЛОГИЙ

https://www.facebook.com/anna.ladoshkina