Практическая доступность с wordpress
TRANSCRIPT
Онлайн-кинотеатр для слабовидящихна 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