Вимога WCAG A/AA Пріоритет: Критично

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

Деякі поля форм не мають підпису, який можуть прочитати допоміжні технології, тому незрозуміло, що в них вводити.

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

Користувачі програм зчитування з екрана чують лише «поле редагування» і не знають, що вводити: імʼя, телефон чи поштовий індекс. Під час оформлення замовлення це прямо призводить до покинутих замовлень. Поля лише з плейсхолдером також плутають літніх покупців, щойно ті починають вводити текст.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
літні покупці
люди з когнітивними порушеннями
користувачі голосового керування

Як виправити

Повʼяжіть видимий <label for> з кожним полем або загорніть поле в label. Використовуйте aria-label лише тоді, коли видимий підпис справді неможливий. Плейсхолдер не є підписом. Перевірте поля пошуку, розсилки, кількості та оформлення замовлення.

У Shopify

Оформленням замовлення керує Shopify, тому проблеми зазвичай у полях пошуку, розсилки, контактів чи кількості в темі або у формах, доданих застосунками. Додайте підписи в шаблонах Liquid теми або в налаштуваннях застосунку.

У Shoptet (CZ)

Зазвичай це поля пошуку, розсилки чи контактів у шаблоні. Спершу перевірте налаштування шаблону; глибші зміни розмітки форм зазвичай потребують участі Shoptet або партнера Shoptet.

У PrestaShop

Перевірте шаблони пошуку, розсилки, облікового запису та оформлення замовлення в темі й модулях. Додайте елементи <label> у файли .tpl або в перевизначені шаблони модулів.

У WooCommerce

Перевірте форми оформлення замовлення, облікового запису та пошуку в темі, а також плагіни форм і checkout. Додайте підписи в шаблонах дочірньої теми або використайте параметри плагіна, які виводять справжні елементи <label>.

Стандарти

Стандарти
Стандарт	Пункт
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 label. dequeuniversity.com, github.com, www.w3.org

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