Pull to refresh

Основные ошибки accessibility при разработке сайта

Reading time 4 min
Views 7.9K
Приветствую! В данной статье речь пойдет о самых распространенных ошибках web мастеров с точки зрения доступности для пользователей программ экранного доступа. Я, будучи и сам таким пользователем, постараюсь описать основные проблемы недоступности сайтов и способы их решения.

Хотелось бы сразу подчеркнуть, что данная статья не претендует на какой-либо стандарт, не является прямым руководством к действию, а также содержит в себе только самые распространенные, но от того не менее критичные ошибки accessibility при создании сайта.


Статья была написана в семнадцать лет, когда я только начинал заниматься доступностью.


Для понимания: я слепой пользователь программ экранного доступа. В работе скринридеров, без преувеличения, понимаю лучше большинства читателей без ограничений по зрению.


Картинки и атрибут ALT


Самой распространенной ошибкой многих web мастеров является неиспользование атрибута alt="" в теге <img/> или неправильное его использование.

Если хотя бы указывать атрибут кое-как приучили требования поисковиков, то верно указывать мало кто умеет. Ниже приведу примеры неграмотного содержимого атрибута:

  • Использование одного и того же слова для разных картинок (alt=«image»);
  • Использование не несущего смысла набора символов (alt=«dsf86sdfgbvc94nf56»);
  • Дублирование заголовка страницы;
  • Размещение в атрибуте целого предложения, словосочетания;
  • Указание в атрибуте одной буквы, зачастую не являющуюся даже первой буквой названия предмета на изображении.

Как наиболее логично использовать данный атрибут, разберем на примере.

Предположим, что у вас на сайте есть список пользователей, напротив аватарки каждого отображается его имя. Также предположим, что в списке пользователей попалось три пользователя с именем «Игорь». Если обычный пользователь среди Игорей найдет нужного по аватарке, то пользователь программы экранного доступа по одному имени нужного определить не сможет.

В этом случае самым верным решением будет у каждой аватарки в атрибуте alt="" вывести имя с фамилией пользователя. Таким образом, с точки зрения графического отображения, ничего не изменится, а незрячий посетитель сможет найти нужного человека.

Заголовки


Всем отлично известны теги заголовков с <h1> по <h6>. Думаю логично, что они должны использоваться именно для заголовков, а не для изменения размера шрифта, но находятся и такие умные люди.

В программе экранного доступа можно задать длину строки, обычно по умолчанию это 100 символов.

Когда символов в заголовке оказывается больше, чем одна сотня, скринридер перебрасывает остаток на новую строку.

Таким образом, при нажатии стрелки вниз на слишком длинном заголовке, программа озвучивает на двух строках «Заголовок уровня 1-6».

Всплывающий подсказки


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

Решение очень простое, достаточно использовать у ссылок атрибут title="", но никак не использовать скрипты.

Примечание: есть непроверенная информация, что на планшетах атрибут title не озвучивается, но в статье речь идет в первую очередь о программах экранного доступа для Windows: Jaws и NVDA.

Таблицы и табличная верстка


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

Основные ошибки при использовании таблиц:

  • Вложенность одной или нескольких таблиц в другую очень затрудняет навигацию, так как скринридер читает координаты каждой ячейки;
  • Использование тега <th> там, где он не требуется. Примером может выступить скрипт игр «Ogame», «2moons», «Supernova» и подобных;

От вложенности таблиц лучше отказаться совсем, а атрибут <th> использовать в таблицах с расценками, со списком терминов, а не просто для красоты.

Роли и метки


Наверное самое известное из accessibility — это роли и метки.

Атрибут role="" обычно прописывают в блоках <div>, но с приходом HTML5 надобность прописывания ролей в блоках исчезла.

В таблице представлен список ролей и заменяющих тегов из HTML5.

Роль Заменяющий тег Представление скринридером
banner <header> Банер ориентир
navigation <nav> Навигация ориентир
main <main> Основной ориентир
complementary <aside> Добавочный ориентир
contentinfo <footer> Информация о содержимом ориентир
search - Поиск ориентир

Как видно из таблицы, в HTML5 нет альтернативного тега для роли «search», ну или я ее не знаю.

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

В этом случае выручает атрибут area-label="".

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

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

Как по мне, например, роль «banner» вообще только мешается, так как всем понятно, что сверху шапка, а не подвал.

Капча


Напоследок хотелось бы затронуть тему капчей.

Благодаря специальным плагинам и аддонам, у современного пользователя скринридера не должно возникать проблем с прохождением защиты от роботов в следующих случаях:

  • капча представлена текстовым арифметическим примером с просьбой ввести ответ;
  • В форме используется виджет Recaptcha от Google, в котором необходимо просто отметить флажок;
  • если используется графическая картинка, то у нее должен быть атрибут alt, желательно alt=«captcha» или alt=«картинка с кодом».

Если же картинка с кодом без атрибута alt, либо защита представляет собой паззл, либо вообще картинка вшита в дизайн сайта и символы генерируются прямо на фоне, то форму самостоятельно отправить незрячий посетитель уже не сможет.

На этом все


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

Если у кого-то остались еще какие-либо вопросы, охотно постараюсь ответить на них в комментариях.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+4
Comments 43
Comments Comments 43

Articles