Рекомендуемая практика Приоритет: Незначительно
Декоративный элемент всё равно озвучивается скринридерами
Элемент, помеченный как декоративный (role="presentation" или role="none"), также имеет ARIA-атрибуты или получает фокус с клавиатуры, поэтому одни скринридеры его пропускают, а другие нет. Это рекомендуемая практика сверх уровня WCAG 2.2 AA.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи скринридеров могут слышать лишние бессмысленные элементы или попадать на пустую остановку при нажатии Tab, например на декоративной иконке или разделителе. Это небольшое неудобство, но лишний «шум» замедляет просмотр товаров и заполнение форм.
Кого это касается
- пользователи скринридеров
- пользователи, которые работают только с клавиатуры
Как исправить
Если элемент действительно декоративный, уберите из него глобальные ARIA-атрибуты (например, aria-label или aria-describedby) и любой tabindex, чтобы его стабильно игнорировали. Если он несёт смысл или должен быть кликабельным, уберите role="presentation" или role="none" и задайте вместо этого правильную роль и доступное имя. Никогда не ставьте декоративную роль на ссылку, кнопку или поле формы.
В Shopify
Обычно причина в сниппетах иконок или секциях темы либо в приложении. Исправьте разметку в сниппетах или секциях темы (Liquid) или обратитесь к разработчику приложения.
В Shoptet (CZ)
Зависит от шаблона или дополнения. Проверьте, исправляет ли это новая версия шаблона; если нет, обратитесь в Shoptet или к партнёру либо исправьте собственный вставленный код.
В PrestaShop
Обычно это в файлах .tpl темы или в шаблонах модуля. Переопределите шаблон в теме, а не редактируйте модуль напрямую.
В WooCommerce
Обычно причина в теме, конструкторе страниц или плагине. Исправьте это в шаблоне дочерней темы или сообщите автору плагина, чтобы обновления не отменили исправление.
Стандарты
Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.
Автоматическая проверка: правило axe-core presentation-role-conflict.
dequeuniversity.com, github.com