Некоторые подписи стоят там, где скринридеры их игнорируют

Некоторые элементы используют атрибуты доступности, запрещённые для их типа, чаще всего aria-label на обычном <div> или <span> без роли.

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Скринридеры часто пропускают такие подписи. Рейтинг в звёздах, записанный как aria-label="4,5 из 5", значок «Скидка» или метка наличия могут тогда ничего не сказать или сказать не то, что видят остальные покупатели.

Кого это касается

пользователи скринридеров
незрячие покупатели

Как исправить

Не ставьте aria-label или aria-labelledby на элементы без подходящей роли (обычные div, span, p или элементы с role="presentation"). Вместо этого передайте информацию текстом, например в визуально скрытом <span>, или дайте элементу подходящую роль, например role="img" для рейтинга из иконок-звёзд.

В Shopify

Обычно это код отзывов, значков или иконок в теме или приложениях. Измените сниппет Liquid так, чтобы использовать визуально скрытый текст или role="img"; о виджетах приложений сообщите разработчику.

В Shoptet (CZ)

Обычно это рейтинги, значки или иконки в шаблоне или дополнениях. Обратитесь в Shoptet или к партнёру Shoptet.

В PrestaShop

Обычно это рейтинги, метки или иконки в теме или модулях. Исправьте это в шаблонах .tpl или в переопределённых шаблонах модулей.

В WooCommerce

Обычно это рейтинги в звёздах, значки или иконки в теме, конструкторе страниц или плагинах отзывов. Исправьте это в дочерней теме или сообщите автору плагина.

Стандарты

Стандарты
Стандарт	Пункт
WCAG 2.2	4.1.2 (A) Name, Role, Value
WCAG 2.1	4.1.2 (A) Name, Role, Value
WCAG 2.0	4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1	9.4.1.2
EN 301 549 3.2.1	9.4.1.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.4.1.2

Автоматическая проверка: правило axe-core aria-prohibited-attr. dequeuniversity.com, github.com, www.w3.org

Все правила, которые мы проверяем