Рекомендуемая практика Приоритет: Умеренно
Текстовый блок скрывает ссылки или кнопки внутри
Элемент с role="text" содержит ссылку, кнопку или другой элемент, который может получить фокус. role="text" — нестандартная роль, которая заставляет некоторые программы чтения с экрана читать все содержимое как обычный текст. Это рекомендуемая практика, а не требование WCAG уровня AA.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
В программах чтения с экрана, которые поддерживают role="text", прежде всего VoiceOver на iPhone и Mac, ссылка или кнопка внутри может быть прочитана как обычный текст. Покупатель не знает, что на нее можно нажать, или вообще не может до нее добраться. Если так обернута ссылка с ценой или кнопка «Добавить в корзину», это может сорвать покупку.
Кого это касается
- пользователи программ чтения с экрана
- пользователи VoiceOver на iPhone, iPad и Mac
Как исправить
Используйте role="text" только для элементов с обычным текстом, например чтобы разбитая цена вроде «€19<sup>99</sup>» не читалась по частям. Уберите role="text" с любого элемента, который содержит ссылки, кнопки, поля форм или элементы с tabindex, или вынесите эти интерактивные элементы за его пределы.
В Shopify
Обычно это собственная разметка цен или значков в сниппетах Liquid либо приложение. Уберите role="text" с элементов, которые содержат ссылки или кнопки.
В Shoptet (CZ)
Обычно это собственный код. Уберите role="text" с элементов, которые содержат ссылки или кнопки; если ее добавляет шаблон, обратитесь к Shoptet или партнеру.
В PrestaShop
Обычно это измененные шаблоны .tpl списков товаров или цен либо модули. Уберите role="text" вокруг интерактивных элементов, желательно через переопределение.
В WooCommerce
Обычно это собственные шаблоны цен, виджеты конструктора страниц или плагины. Исправьте это в шаблоне дочерней темы или обратитесь к автору плагина.
Стандарты
Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.
Автоматическая проверка: правило axe-core aria-text.
dequeuniversity.com, github.com