Главная » Вебмастеру » Невизуальная доступность вашего сайта для незрячих пользователей

Невизуальная доступность вашего сайта для незрячих пользователей

Интернет стал неотъемлемой частью жизни сотен миллионов людей по всему миру. Это же утверждение верно и для тех, кто обладает плохим зрением или не имеет его вовсе. Так каким образом такие пользователи взаимодействуют со всемирной сетью?

Незрячие люди используют скрин ридеры: программы со звуковым интерфейсом, которые озвучивают информацию на экране их устройств при помощи синтезированной речи. Роботоризированный голос для нас уже давно не новость, но всё-таки мы зачастую не задумываемся над тем, насколько тяжело бывает обладателям подобных программ экранного доступа взаимодействовать с недоступными веб-ресурсами. А ведь обеспечить эту самую невизуальную доступность со стороны разработчика довольно просто.

О повышении юзабилити для незрячих пользователей рассказывает Надежда Василенко, сертифицированный специалист по невизуальной доступности Интернет-ресурсов, дипломированный веб-программист и автор тематического YouTube канала.

На фото Надежда Василенко

© На фото Надежда Василенко

1. Адекватная разметка html.

Правильная гипертекстовая разметка — залог успеха невизуальной доступности. Это фундамент, на котором строится здание «Интернет-инклюзии». Есть простые правила и их следует выполнять для собственной же выгоды. Чистый код ещё никому не навредил: установка тега <h1> позволит поисковым системам производить коректную ранжировку Вашего сайта, а программы экранного доступа смогут определить элемент, как «заголовок первого уровня». Просто большой чёрный текст над статьёй вместо правильной разметки не добавит Вам «крутости» и не сэкономит время, а лишь добавит проблем в дальнейшем. Помните про валидацию кода, не брезгуйте этичностью его написания!

2. Семантическая разметка того же html

В html есть такие теги, которые визуально практически не изменяют вид веб-страницы при использовании, но очень помогают незрячим осуществлять быструю навигацию по веб-странице. К таким тегам относятся:

  1. <header> — шапка сайта.
  2. <nav> — область навигационного меню
  3. <main> — основная область сайта
  4. <article> — область статьи
  5. <footer> — подвал сайта.

Добавление этих тегов ускоряет процесс мониторинга сайта незрячими пользователями.

3. Описание изображений: атрибуты alt и title.

Не путайте атрибут title с одноимённым тегом. Это словечко используется наравне с alt для того, чтобы назначать описание изображениям на сайте. Они различаются лишь по реакции на действия пользователя с картинкой. В нашем случае они представляют интерес именно потому, что скрин ридеры при перемещении фокуса на графику берут информацию об изображении именно из них. Тут есть несколько замечаний:

  1. Подписана должна быть именно та графика, которая несёт смысловую нагрузку: виджеты социальных сетей, фотография к статье и т. д.
  2. Подпись должна отображать содержание картинки и не состоять из бессмысленного набора символов и цифр.
  3. Описание графики должно быть лаконичным и понятным для незрячего пользователя. Не надо расписывать все оттенки вечернего неба, сравнивая его с чем-то привычным именно для Вас. Достаточно будет обозначить факт самого заката и общий тон цветов, присутствующий на изображении.

На фото молодая девушка за ноутбуком в чёрных очках и наушниках

4. Технология wai-area

На Хабре можно почитать по этой теме здесь. Зачем нужны ещё какие-то стандарты доступности, если программы экранного доступа, опираясь на DOM, строят собственное представление об открытом интернет-ресурсе для своего незрячего пользователя? Всё дело в динамических элементах, которые часто фигурируют в современном дизайне веб-страниц. Чаще всего, они написаны на java script. Это и пресловутые слайд-шоу, карусели, контекстные формы, исчезающие кнопки и прочие радости синтаксическо-сахарной жизни.

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

Вместо послесловия

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

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

Надежда Василенко, как профильный специалист по невизуальной доступности Интернет-ресурсов, поможет вашему веб-сайту стать более дружелюбным ко всем своим посетителям. По вопросам сотрудничества или получения консультации пишите на godfreedom.nv@yandex.ru или в сообщения ВКонтакте.

Удачи в разработке крутых проектов!

  поделитесь с друзьями:
Подписаться на почтовую рассылку

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

Авторизоваться через: 

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить", я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности

Сообщите об ошибке, мы исправим:

Отправить