Делаем онлайн-кинотеатр для слепых (WCAG 2.0 AAA)
В РФ живет около 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% работы.
Создавайте доступные сайты!
