Некоторые элементы используют несуществующую роль

У некоторых элементов атрибут role содержит значение с опечаткой, выдуманное или абстрактное, поэтому вспомогательные технологии не понимают, что это за элемент.

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

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

Скринридер может озвучить меню, вкладку, всплывающее окно или кнопку как обычный текст либо пропустить их. Покупатели, которые им пользуются, могут не найти навигацию, фильтры или элементы оформления заказа.

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

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

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

Используйте только допустимые роли ARIA из спецификации WAI-ARIA, написанные правильно и строчными буквами, например role="button", role="navigation" или role="dialog". Не используйте абстрактные роли вроде "widget", "landmark" или "input". Ещё лучше взять родной HTML-элемент (<button>, <nav>, <dialog>) и убрать role.

В Shopify

Обычно это собственный код темы или виджеты приложений: меню, слайдеры, всплывающие окна. Исправьте роль в Liquid-секциях или сниппетах темы; попросите разработчиков приложений исправить роли, которые добавляют их приложения.

В Shoptet (CZ)

В стандартных шаблонах встречается редко; чаще в собственном коде или добавленных скриптах. Попросите 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-roles. dequeuniversity.com, github.com, www.w3.org

У некоторых кнопок нет названия
WCAG 4.1.2 A
На странице устаревшая разметка мигающего текста
WCAG 2.2.2 A
У атрибутов доступности неверные значения
WCAG 4.1.2 A
У некоторых переключателей и флажков нет названия
WCAG 4.1.2 A

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