Рекомендуемая практика Приоритет: Незначительно · экспериментальная проверка: стоит посмотреть вручную
Элемент, доступный с клавиатуры, не сообщает, что он такое
Элемент, до которого можно дойти клавишей Tab, например кликабельный div или span, не имеет роли, сообщающей вспомогательным технологиям, что это кнопка, ссылка или другой элемент управления. axe помечает эту проверку как экспериментальную, поэтому результаты нужно проверять вручную. Это рекомендуемая практика, а не требование WCAG уровня AA.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователь клавиатуры или программы чтения с экрана попадает на элемент, но слышит только его текст или ничего, без слов «кнопка» или «ссылка». Он не понимает, что элемент можно активировать, и может пропустить выбор размера, фильтр или «добавить в избранное».
Кого это касается
- пользователи программ чтения с экрана
- пользователи клавиатуры
- люди, управляющие голосом
Как исправить
Используйте нативные элементы управления: <button> для действий и <a href> для переходов. Если собственный элемент нужно оставить, добавьте подходящую роль (button, link, tab, checkbox и т. п.) и поведение с клавиатуры, которого эта роль ожидает. Если элемент не интерактивный, уберите tabindex, чтобы он не получал фокус. Поскольку правило экспериментальное, проверяйте каждый результат вручную перед изменением кода.
В Shopify
Обычно причина в собственном коде темы или приложений, например в цветовых образцах, быстром просмотре или кнопках избранного. Замените кликабельный div или span на <button> в Liquid-сниппете или попросите разработчика приложения исправить это.
В Shoptet (CZ)
Зависит от шаблона и дополнений. Сообщите об элементе в Shoptet или разработчику дополнения; собственный код, который вы добавили сами, можно исправить напрямую.
В PrestaShop
Обычно это JavaScript темы или модули, например выбор вариантов и слайдеры. Исправьте разметку в .tpl-файлах и скриптах темы или обратитесь к автору модуля.
В WooCommerce
Часто это виджеты конструктора страниц или плагины, которые делают div кликабельными. Обновите плагин или измените разметку в шаблоне дочерней темы, чтобы элементы управления были настоящими кнопками или ссылками.
Стандарты
Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.
Автоматическая проверка: правило axe-core focus-order-semantics.
dequeuniversity.com, github.com