- PVSM.RU - https://www.pvsm.ru -
Приветствую!
В данной статье речь пойдет о самых распространенных ошибках web мастеров с точки зрения доступности для пользователей программ экранного доступа.
Я, будучи и сам таким пользователем, постараюсь описать основные проблемы недоступности сайтов и способы их решения.
Хотелось бы сразу подчеркнуть, что данная статья не претендует на какой-либо стандарт, не является прямым руководством к действию, а также содержит в себе только самые распространенные, но от того не менее критичные ошибки accessability при создании сайта.
Самой распространенной ошибкой многих web мастеров является неиспользование атрибута alt="" в теге <img/> или неправильное его использование.
Если хотя бы указывать атрибут кое-как приучили требования поисковиков, то верно указывать мало кто умеет.
Ниже приведу примеры неграмотного содержимого атрибута:
Как наиболее логично использовать данный атрибут, разберем на примере.
Предположим, что у вас н
а сайте есть список пользователей, напротив аватарки каждого отображается его имя.
Также предположим, что в списке пользователей попалось три пользователя с именем «Игорь».
Если обычный пользователь среди Игорей найдет нужного по аватарке, то пользователь программы экранного доступа по одному имени нужного определить не сможет.
В этом случае самым верным решением будет у каждой аватарки в атрибуте alt="" вывести имя с фамилией пользователя. Таким образом, с точки зрения графического отображения, ничего не изменится, а незрячий посетитель сможет найти нужного человека.
Всем отлично известны теги заголовков с <h1> по <h6>.
Думаю логично, что они должны использоваться именно для заголовков, а не для изменения размера шрифта, но находятся и такие умные люди.
В программе экранного доступа можно задать длину строки, обычно по умолчанию это 100 символов.
Когда символов в заголовке оказывается больше, чем одна сотня, скринридер перебрасывает остаток на новую строку.
Таким образом, при нажатии стрелки вниз на слишком длинном заголовке, программа озвучивает на двух строках «Заголовок уровня 1-6».
На многих сайтах, в том числе некоторых регистраторов доменных имен, любят указывать цены за продление услуги во всплывающей подсказке при наведении мыши.
Я не говорю, что это плохая тактика, но стоит задуматься о доступности этих подсказок для всех клиентов.
Решение очень простое, достаточно использовать у ссылок атрибут title="", но никак не использовать скрипты.
Примечание: есть непроверенная информация, что на планшетах атрибут title не озвучивается, но в статье речь идет в первую очередь о программах экранного доступа для Windows: Jaws и NVDA.
Я не знаю, кто сейчас еще использует табличную верстку, но все же стоит от нее отказаться, если вы хотите сделать свой ресурс удобным для незрячих и слабовидящих.
Основные ошибки при использовании таблиц:
От вложенности таблиц лучше отказаться совсем, а атрибут <th> использовать в таблицах с расценками, со списком терминов, а не просто для красоты.
Наверное самое известное из accessability — это роли и метки.
Атрибут role="" обычно прописывают в блоках <div>, но с приходом HTML5 надобность прописывания ролей в блоках исчезла.
В таблице представлен список ролей и заменяющих тегов из HTML5.
Роль | Заменяющий тег | Представление скринридером |
---|---|---|
banner | <header> | Банер ориентир |
navigation | <nav> | Навигация ориентир |
main | <main> | Основной ориентир |
complementary | <aside> | Добавочный ориентир |
contentinfo | <footer> | Информация о содержимом ориентир |
search | - | Поиск ориентир |
Как видно из таблицы, в HTML5 нет альтернативного тега для роли «search», ну или я ее не знаю.
Если на сайте встречается несколько разных меню, полей поиска, все ведь с одинаковой ролью, а если каждый подписывать обычным текстом, может получиться визуально слишком много информации.
В этом случае выручает атрибут area-label="".
В данном атрибуте вы можете указать любую информацию для пользователя программы экранного доступа, которая поможет ему сориентироваться среди однородных областей.
Важное дополнение: не стоит сразу же прописывать роли и метки ко всем областям сайта, это ужасно затрудняет навигацию.
Как по мне, например, роль «banner» вообще только мешается, так как всем понятно, что сверху шапка, а не подвал.
Напоследок хотелось бы затронуть тему капчей.
Благодаря специальным плагинам и аддонам, у современного пользователя скринридера не должно возникать проблем с прохождением защиты от роботов в следующих случаях:
Если же картинка с кодом без атрибута alt, либо защита представляет собой паззл, либо вообще картинка вшита в дизайн сайта и символы генерируются прямо на фоне, то форму самостоятельно отправить незрячий посетитель уже не сможет.
Я постарался описать основные ошибки, из-за которых сайты могут быть мало доступны для пользователей программ экранного доступа. Надеюсь, что кому-нибудь данная статья поможет в создании доступного сайта.
Если у кого-то остались еще какие-либо вопросы, охотно постараюсь ответить на них в комментариях.
Автор: maniyax
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/262012
Ссылки в тексте:
[1] Источник: https://habrahabr.ru/post/335352/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox
Нажмите здесь для печати.