Требование WCAG A/AA Приоритет: Критично
У нестандартных полей ввода нет подписи
У некоторых полей ввода, сделанных вручную, например поиска или выбора страны, нет названия, которое могут прочитать вспомогательные технологии.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи скринридеров не понимают, для чего поле, и могут не суметь найти товар или ввести адрес.
Кого это касается
- незрячие покупатели
- пользователи скринридеров
- пользователи голосового управления
Как исправить
Дайте название каждому элементу с ролью поля ввода (combobox, textbox, searchbox, listbox, slider, spinbutton) через aria-labelledby со ссылкой на видимый текст или через aria-label. Ещё лучше — нативные <input> или <select> с <label>.
В Shopify
Обычно это подсказки поиска, фильтры или виджеты приложений. Исправьте подписи в Liquid и JavaScript темы; о виджетах приложений сообщите разработчику.
В Shoptet (CZ)
Обычно это элементы поиска или фильтров в шаблоне. Сообщите об этом в Shoptet или партнёру.
В PrestaShop
Обычно это модули поиска или фильтров. Добавьте подписи в переопределённых шаблонах модуля или сообщите разработчику модуля.
В 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-input-field-name.
dequeuniversity.com, github.com, www.w3.org
Похожие проверки
-
У выпадающего списка нет подписи
WCAG 4.1.2 A
-
Посетители не могут увеличить страницу на телефоне
WCAG 1.4.4 AA
-
У кнопки-изображения нет текстового описания
WCAG 1.1.1 A
-
Список собран неправильно
WCAG 1.3.1 A