Требование WCAG A/AA Приоритет: Умеренно
У некоторых полей форм несколько подписей
Поле формы, например email, количество или адрес, связано с двумя или более элементами <label>.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Скринридеры обрабатывают это по-разному: одни читают только первую подпись, другие все, третьи только последнюю. Пользователи голосового управления могут не понять, какие слова произнести, чтобы перейти к полю. В форме заказа или регистрации это замедляет заполнение и приводит к ошибкам.
Кого это касается
- незрячие покупатели
- пользователи скринридеров
- пользователи голосового управления
Как исправить
Дайте каждому полю ровно один <label>. Если нужен дополнительный текст, например подсказка или пример формата, свяжите его через aria-describedby, а не второй подписью. Проверьте, нет ли рядом с видимой подписью скрытого дубликата, который добавила тема или плагин.
В Shopify
В стандартных темах встречается редко; обычно причина в доработках темы или приложениях форм, которые добавляют свою подпись рядом с подписью темы. Уберите дубликат в Liquid-сниппете или в настройках приложения.
В Shoptet (CZ)
В стандартном шаблоне встречается редко; обычно причина в собственном коде или сторонних формах. Сначала исправьте свой код; по шаблону обратитесь в Shoptet или к партнёру Shoptet.
В PrestaShop
Обычно в изменённых шаблонах форм .tpl или в модулях, добавляющих свои подписи (рассылка, поля заказа). Оставьте одну подпись на поле в теме или в переопределённых шаблонах модулей.
В WooCommerce
Часто причина в плагинах форм, редакторах полей оформления заказа или конструкторах страниц, которые добавляют вторую подпись рядом с подписью темы. Проверьте настройки поля или шаблоны плагина и оставьте одну подпись на поле.
Стандарты
| Стандарт | Пункт |
|---|---|
| WCAG 2.2 | 3.3.2 (A) Labels or Instructions |
| WCAG 2.1 | 3.3.2 (A) Labels or Instructions |
| WCAG 2.0 | 3.3.2 (A) Labels or Instructions |
| EN 301 549 4.1.1 | 9.3.3.2 |
| EN 301 549 3.2.1 | 9.3.3.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.3.3.2 |
Автоматическая проверка: правило axe-core form-field-multiple-labels.
dequeuniversity.com, github.com, www.w3.org
Похожие проверки
-
У нескольких встроенных фреймов одинаковое название
WCAG 4.1.2 A
-
Нестандартные меню или списки собраны неправильно
WCAG 1.3.1 A
-
У выпадающего списка нет подписи
WCAG 4.1.2 A
-
У страницы нет заголовка
WCAG 2.4.2 A