Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,144 views

Published on

Слайды для презентации "Онлайн-кинотеатр для слабовидящих на WordPress: практическая доступность" на WordCamp Russia 2015, 15 августа 2015
Практические советы по повышению доступности сайта для слабовидящей аудитории.

Published in: Internet
  • Be the first to comment

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

  1. 1. Онлайн-кинотеатр для слабовидящих на WordPress: практическая доступность Анна Ладошкина ТЕПЛИЦА СОЦИАЛЬНЫХ ТЕХНОЛОГИЙ WordCamp Russia, Москва, 2015 #a11y
  2. 2. Информационный ресурс http://te-st.ru Неформальные мероприятия по ИТ-тематике Консультации для НКО в сфере ИТ Разработка собственных инструментов и приложений Теплица социальных технологий Анна Ладошкина руководитель направления помощи НКО
  3. 3. Сайт в скринридере для тотально слепого человека <img alt="IMG_456756_345"…> <a href="…">Нажмите сюда</a> <img alt="милый котик"…> <a href="…">Чем кормить котика</a>
  4. 4. Поиск ссылок для человека с цветовой слепотой Мы предлагаем интересные книги Захватывающее чтение для больших и маленьких Мы предлагаем интересные книги Захватывающее чтение для больших и маленьких
  5. 5. Экранное увеличение
  6. 6. Экранное увеличение: бонус за адаптивный дизайн
  7. 7. ⠵⠁⠟⠑⠍⠢
  8. 8. + тифлокомментирование =
  9. 9. Миф # 1 Слабовидящие люди самостоятельно Интернетом не пользуются
  10. 10. Кто такие слабовидящие с точки зрения UX по данным: Всероссийского общества слепых, Минздрава РФ, ВОЗ инвалиды по зрению расстройства цветовосприятия 280 тыс.чел до 8% населения возрастные и другие проблемы со зрением до 10 млн. чел
  11. 11. Пример сайта специально адаптированного для слабовидящих http://аоао.рф
  12. 12. Ассистивные технологии - тактильные дисплеи - скринридеры (и голосовое управление) - средства экранного увеличения фото: User:Lgd
  13. 13. WCAG 2.0 WAI-ARIA http://www.w3.org/TR/WCAG20/ http://www.w3.org/WAI/intro/aria
  14. 14. WordPress Accessibility Team https://make.wordpress.org/accessibility/
  15. 15. Контраст - не полагаться только на цвет - уровень контраста между текстом и фоном - инструмент тестирования на этапе дизайна
  16. 16. Композиция страницы - одна колонка - адаптивный дизайн - относительные пропорции - минимум «визуального шума»
  17. 17. Содержание страницы - осмысленные заголовки и ссылки - текстовое описание для ВСЕГО - короткие внятные тексты без ошибок <img alt="IMG_456756_345"…> Х
  18. 18. Навигация с клавиатуры - доступность элементов управления с клавиатуры - зримое изменение состояния (не только цвет)
  19. 19. Специальные приемы - текст для скринридеров - ссылки пропустить навигацию - роли для областей - 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>
  20. 20. Тестирование автоматическое + пользовательское Скринридеры Онлайн-чекеры Встроенные инструменты 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
  21. 21. С чего начать? улучшить работающий пример https://github.com/wpaccessibility/a11ythemepatterns https://github.com/Teplitsa/svet СВЕТ https://wordpress.org/themes/tags/accessibility-ready/ Accessibility ready Accessibility Theme Patterns
  22. 22. Вот если бы все сайты были доступными фото: Kelli Gaskill
  23. 23. https://te-st.ru #a11y Будем на связи! Анна Ладошкина ТЕПЛИЦА СОЦИАЛЬНЫХ ТЕХНОЛОГИЙ https://www.facebook.com/anna.ladoshkina

×