...

суббота, 14 февраля 2015 г.

Делаем онлайн-кинотеатр для слепых (WCAG 2.0 AAA)

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

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


image

(пример адаптированной темы на 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% работы.


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


Recommended article: Chomsky: We Are All – Fill in the Blank.

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


Комментариев нет:

Отправить комментарий