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

в 12:43, , рубрики: Accessability, html, Разработка веб-сайтов, метки:

Приветствую!

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

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

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

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

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

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

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

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

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

Заголовки

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

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

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

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

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

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

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

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

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

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

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

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

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

Роли и метки

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

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

На этом все

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

Если у кого-то остались еще какие-либо вопросы, охотно постараюсь ответить на них в комментариях.

Автор: maniyax

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js