http://habrahabr.ru/post/250539/

В РФ живет около 275 тысяч слепых и слабовидящих людей, 22% молодежь, некоторые из них также являются пользователями интернета, как и мы.

В этой статье я поделюсь с вами инструментами и необычным опытом, который можно получить при создании онлайн-кинотеатра для слабовидящих людей.


(пример адаптированной темы на GitHub по ссылке с картинки )

Что такое WCAG 2.0?

Это стандарт доступности сайтов для людей с ограниченными возможностями. Описывает правильные подходы к проектированию интерфейсов и дизайна сайтов. Почитать про стандарт: тут на английском , а тут на русском.

Зачем вообще это нужно?

Слабовидящие люди пользуются интернетом с помощью специального ПО, которое работает качественно только на специальным образом адаптированных сайтах.

Где будут фильмы? что такое тифлокомментирование?

Тифлокомментарии в кино — это дополнительная звуковая дорожка, содержащая закадровое описание видеоряда. Тифлокомментарии составляются по определенным правилам и озвучиваются профессиональным диктором в паузы между диалогами. Фильмы покажут только инвалидам по зрению из соответствующих организаций (но всё это действительно работает).

Инструменты для тестирования

Читалки
Такие пользователи слышат ваш сайт с помощью NVDA и JAWS если используют Win или с помощью встроенного Voiceover на Mac OS Х (она входит в состав операционки и достаточно удобна).

Описание VoiceOver есть здесь, про JAWS можно почитать тут, а вот тут можно узнать больше про NVDA.
Третий продукт — это проект с открытым исходным кодом и вы можете помочь в его улучшении.

Чекеры
Чекры легко нагуглить по запросу «wcag 2.0 checker» (их достаточно), мне понравился вот этот.
Кроме того, есть еще специальный тулбар для FireFox.

Очень удобно, если у вас есть неподалеку подходящий «тестер», но если нет, вы можете воспользоваться готовыми чекерами или включить программу-читалку и попробовать использовать свой сайт с закрытыми глазами.

Впечатления и подводные камни

1. «Обычный сайт» в скринридере звучит как каша, пользоваться стандартной клавиатурной навигацией — невозможно, т.к. не видно состояний, поэтому быстро теряешься. Однако, на сайтах даже с минимальной адаптацией можно понять что где и даже что-то почитать.

2. Скринридеры сами по себе еще недостаточно совершенные, и неясно — это программа глючит, или на сайте косяк.

3. Интересно читать тексты — длинные и скучные можно проматывать. Если текст нормально размечен с подзаголовками — промотка на них ориентируется и можно уловить общий смысл. Если нет, то читалки выхватывают отдельные слова и в итоге получается компот.

4. Интересно ведут себя адаптивные сайты в зуме и с «пропорциональной типографикой» — увеличиваешь размер — получается такой гигантский мобильный лайаут, но пропорции между элементами сохраняются и по прежнему все понятно.

5. В зависимости от браузера скринридеры по разному читают — и вообще они довольно разные.

6. Отсутствуют многие устойчивые конвенции привычные зрячим: например, шапка сайта и «первый экран» не существуют, есть лишь «информация в начале страницы», которая повторяется каждый раз, если разработчики не вставили ссылку для «пропустить».

7. Проблема с ссылками в «новом окне»: человек с большой долей вероятности теряется и не понимает, что произошло и вернуться нельзя, потому что обычная кнопка назад не работает.

8. 404-страница: человек в принципе понимает, что что-то не так, но что именно — сориентироваться сложно. Первая идея — это наиболее частая ошибка. Если сеть часто рвется, то человек думает, что интернет оборвался. Если программа какая-то глючит или виснет — он думает, что она зависла и т.п. Иногда разработчики помещают на 404 какие-нибудь «новости» или еще что — и это еще больше запутывает.

8. Поп-апы: например, галерея типа лайбокс вроде бы доступная потому, что фокус на миниатюре и дальше всё с клавиатуры управляется, но для скринридера в ней особых подсказок нет и не понятно как с ней быть.

9. «Разделы в разработке»: человеку очень сложно сориентироваться, что это такое. Он не понимает, что «там просто ничего нет» и думает что «оно есть», но по какой-то причине ему не показывается или что-то сбойнуло у НЕГО.

10. Есть интересные баги: например, в FF плеер — это ловушка — попадаешь в него, а выйти назад с клавиатуры нельзя, так и бродишь по кругу по всем его кнопкам, пока мышкой не ткнешь куда-нибудь (youtube плеер, любой плеер в ифрейме). Cпастись невозможно — существует целый тред на багзилле по этому поводу.

11.Самый распространенный браузер у таких людей — ИЕ и чудо если 9. Это сложный социальный феномен — есть социальная программа РФ, по которой инвалидам по зрению выделяют бесплатно специально оборудованные компьютеры (жуткое старье), они берут «как есть» и пользуются «как есть». Только более-менее молодые соображают что-то туда поставить. Даже если есть Chrome, то они им не пользуются почти, тк ИЕ удобнее. Они к нему привыкли и знают, что как называется, где какие меню и они не меняются никогда (теперь особенно).
Все новые прекрасные функции — им до одного места потому, что не поймешь где что стало и вообще все по другому

12. Приоритеты совсем другие в плане софта: нам нравится новое — удобнее, клево, красота,
а им наоборот — лучше оставить все как было иначе потеряешься и ничего не поймешь и будешь слушать свой скринридер по 10 раз пока въедешь.

13. Иногда у них стоят программы для удаленного управления компом — и когда дело совсем плохо — удаленный собеседник может подключиться и ткнуть мышью куда надо (доверенное лицо или друзья).

14. Про социальные сети: Вконтакте довольно трудно, но возможно пользоваться, а вот в ФБ — практически невозможно — очень много всплывающего и такого где нужно ориентироваться по изображению. Кстати, у Яндекса (по слухам) есть практически слепой человек в штате, который всякие штуки им помогает адаптировать.

15. Если сайт понятен скринридеру — остальным должно быть понятнее в 2 раза. Скринридер — это крутая штука для тестирования — если что-то «странно» в скринридере, то это в большинстве случаев ошибка. Да и тексты начинаешь писать короче и более внятные.

16. Мир (внутри компьютера), который все время с тобой говорит: я кнопка, я ссылка, я всплывашка, да еще с ошибками и сбоями. На вещи, которые нам кажутся простыми (дело пары секунд — нашел кликнул)
могут уходить минуты.

17. На MacOS Маверикс — скринридер называет картинку «образом». Пишите альт текст к картинкам!

Дополнительные ссылки на полезные ресурсы:

Много информации по доступности проектов на WordPress выложено тут, еще кое-что можно подчерпнуть отсюда — здесь собрано множество текстов в одном месте.

П.С.

Особую благодарность заслуживает Фитисов Алексей Владимирович, который выступил тестировщиком и очень помог своими комментариями и отзывами о работе различных программ-читалок, а так же Анна Ладошкина из Теплицы социальных технологий, которая сделала over90% работы.

Создавайте доступные сайты!