Требование WCAG A/AA Приоритет: Серьёзно
У некоторых переключателей и флажков нет названия
Некоторые самодельные переключатели (флажки, переключатели, радиокнопки или пункты меню, сделанные с ролями ARIA) не имеют читаемой подписи.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи скринридеров слышат только «флажок» или «переключатель» и не знают, за что он отвечает: согласие с условиями, подписку на рассылку, фильтр или подарочную упаковку. Они могут пропустить обязательный флажок при оформлении заказа или выбрать не то.
Кого это касается
- незрячие покупатели
- пользователи скринридеров
- пользователи голосового управления
Как исправить
Дайте название каждому элементу с role="checkbox", "switch", "radio", "menuitemcheckbox" или "menuitemradio": видимый текст внутри, aria-labelledby со ссылкой на видимую подпись или aria-label. Где возможно, используйте родные <input type="checkbox"> или <input type="radio"> с <label>.
В Shopify
Обычно это самодельные переключатели фильтров, cookie-баннеры или виджеты приложений (подписки, подарочные опции). Добавьте подписи в Liquid-сниппетах темы; попросите разработчиков приложений подписать переключатели, которые добавляют их приложения.
В Shoptet (CZ)
Обычно это дополнения или собственный код (cookie-баннеры, фильтры). Попросите поставщика дополнения, Shoptet или партнёра добавить подписи.
В PrestaShop
Обычно это модули согласия на cookie, фасетного поиска или опций товара. Добавьте подписи в переопределённых шаблонах .tpl модулей или обратитесь к разработчику модуля.
В WooCommerce
Часто встречается в плагинах согласия на cookie, фильтров и опций товара, а также в переключателях конструкторов страниц. Поищите подписи в настройках плагина; если их нет, исправьте в дочерней теме или сообщите автору плагина.
Стандарты
| Стандарт | Пункт |
|---|---|
| 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-toggle-field-name.
dequeuniversity.com, github.com, www.w3.org
Похожие проверки
-
Атрибуты доступности использованы в неподходящей ситуации
WCAG 4.1.2 A
-
Список «название — значение» собран неправильно
WCAG 1.3.1 A
-
У некоторых встроенных файлов или медиа нет текстового описания
WCAG 1.1.1 A
-
У некоторых индикаторов прогресса нет названия
WCAG 1.1.1 A