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

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

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

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

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

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

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

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

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

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

Заголовки

Всем отлично известны теги заголовков с

по

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

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

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

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

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

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

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

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

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

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

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

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

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

Роли и метки

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

Атрибут role="" обычно прописывают в блоках

https://habrahabr.ru/post/335352/