Нестандартным элементам управления не хватает нужных данных

Некоторые нестандартные элементы управления объявляют роль, но не передают данные, которые эта роль требует, например открыт ли выпадающий список.

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

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

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

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

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

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

Добавьте атрибуты, которые требует роль, например aria-expanded для role="combobox" или aria-valuenow для role="slider". Обновляйте их через JavaScript при изменении состояния. По возможности используйте нативные элементы HTML.

В Shopify

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

В Shoptet (CZ)

Обычно это меню шаблона или дополнения. Сообщите об этом в Shoptet или партнёру: эти элементы — часть шаблона.

В PrestaShop

Обычно это меню темы или модули, например фасетный поиск. Исправьте в шаблонах и JavaScript темы или сообщите разработчику модуля.

В 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-required-attr. dequeuniversity.com, github.com, www.w3.org

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