Приветствую!
В данной статье речь пойдет о самых распространенных ошибках 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
