Деякі поля форм мають кілька підписів

Поле форми, наприклад 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

Усі правила, які ми перевіряємо