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

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

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

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

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

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

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

Отправить