O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

1.153 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

Практическая доступность с 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

×