Всем привет!
Это первая статья на моем сайте, которая посвящена теме доступности цифрового контента. В статье не будет технических подробностей. Я кратко пробегусь по основным проблемам в этой сфере и дам им краткую характеристику.
В качестве вступления
Несмотря на то, что интернет сегодня открывает для людей практически неограниченные возможности как в поиске информации, так и в получении различного рода услуг, не выходя из дома, он не лишён барьеров, в том числе и для людей с инвалидностью.
Небольшая аналогия. Точно так же, как отсутствие тактильной плитки затрудняет передвижение незрячих по городу, отсутствие семантически корректной HTML-разметки на сайте осложняет или делает невозможной навигацию по его разделам. В конечном итоге это приводит к невозможности получить информацию или услугу для пользователей, использующих программы экранного доступа.
Семантически некорректная HTML-разметка веб-ресурса
Выше я уже кратко упомянул, что некорректная HTML-разметка на сайте приводит к тому, что ряд пользователей, в том числе незрячих, использующих программы экранного доступа, просто не могут воспользоваться сайтом. Нет, если очень постараться и приложить сверхусилия, то, возможно, и получится добраться до нужной информации, но это, конечно, не лучший вариант.
Дело в том, что пользователи программ экранного доступа осуществляют навигацию по сайту с помощью его элементов. В первую очередь речь идёт о заголовках, списках, таблицах, формах, ссылках и кнопках управления. Если эти элементы правильно обозначены при вёрстке страницы, программа чтения с экрана легко их распознает.
Часто встречаются ситуации, когда заголовки сайта не обозначены соответствующим тегом, а лишь выделены жирным шрифтом. В таком случае с клавиатуры невозможно будет перейти на такой заголовок.
Если таблица, содержащая информацию, свёрстана с нарушением правил HTML-разметки, то перемещаться по ней с помощью клавиатурных команд будет сложно.
При разработке веб-ресурсов необходимо закладывать возможность взаимодействия с интерфейсом с помощью клавиатуры. Это полезно как для пользователей скринридеров, так и для людей с нарушением моторики.
Нарушение контрастности
Цветовой контраст — это разница между цветовыми тонами, используемыми при оформлении веб-ресурса или приложения.
Когда говорят о цветовом контрасте в контексте цифровой доступности, в первую очередь имеют в виду контраст между текстом и фоном, на котором он размещён. Кроме текста, цветовой контраст необходимо соблюдать и в кнопках управления.
Текст должен хорошо читаться и не сливаться с фоном страницы сайта или приложения. Например, привычный всем чёрный текст на белом фоне всегда будет хорошо восприниматься, чего не скажешь о белом тексте на светло-сером фоне.
Для людей со слабым зрением, а также для страдающих дальтонизмом, вопрос контрастности очень важен.
Цвет вместо текстовых подсказок или предупреждений
Речь идёт о ситуациях, когда основным способом передачи информации от веб-ресурса к пользователю является цвет, а не текст.
Например, в веб-форме для покупки билетов есть поля, обязательные для заполнения. Если пользователь их не заполнит, запрос не отправится на сервер, и он не сможет приобрести билет.
Цифровой барьер в данном случае заключается в том, что если единственным способом обозначения обязательного поля является красный цвет, программа чтения с экрана не сможет передать эту информацию незрячему пользователю, и он не узнает о необходимости заполнения поля.
Чтобы пользователь, использующий скринридер, или человек с дальтонизмом понял, что поле обязательно, об этом нужно сообщить текстом.
Недоступные формы на веб-ресурсах
Не буду уходить далеко от веб-форм, так как именно при их заполнении часто возникают барьеры, преодолеть которые бывает сложно, а иногда и невозможно.
Одним из цифровых барьеров в онлайн-формах является отсутствие меток, которые позволяют пользователям скринридеров понять, какие данные нужно ввести в поле.
Часто в полях форм используют плейсхолдеры — подсказки внутри поля. Проблема в том, что текст плейсхолдера исчезает при вводе. Лучше не использовать этот элемент или дублировать его метками.
Ещё одним барьером является отсутствие текстового описания ошибки валидации формы. Часто ошибка показывается только цветом, что недоступно для скринридеров.
Чтобы форма не стала барьером для людей с инвалидностью, рекомендуется делать краткую, но понятную инструкцию по её заполнению.
Графика без текстового описания
В интернете часто используются графические элементы (изображения, схемы, диаграммы и т. п.), дополняющие текстовую информацию.
Когда фокус программы чтения с экрана попадает на графический элемент, пользователь должен хотя бы в общих чертах понимать, что на нём изображено. Для этого необходимо добавлять альтернативное описание. На самом деле, это довольно просто: многие платформы для публикации контента позволяют это сделать.
Видеоконтент без субтитров
Для глухих и слабослышащих звуковая дорожка в видео недоступна. Решение этой проблемы существует давно — это субтитры, которые отображаются во время воспроизведения и дублируют речь.
Использование недоступной капчи
При регистрации на веб-ресурсах или отправке форм для защиты от атак используют капчу.
Капча бывает разной: вопрос (например, «Сколько будет 2 + 3?»), плохо различимый текст с картинки или аудиозапись.
Часто капча недоступна для скринридеров. Хотя существуют сервисы для её распознавания, это не выход.
При использовании графической капчи необходимо добавлять аудиоверсию. Хороший вариант — простые арифметические задачи, доступные для программ чтения с экрана.
В качестве заключения
В дальнейшем я планирую подробно изучить каждый из обозначенных барьеров, выяснить причины их возникновения и способы устранения. Пока мне не хватает знаний и практики, но это дело наживное.
Подписывайтесь на мой Telegram-канал!