Рекомендована практика Пріоритет: Серйозно
Поля форми не мають видимого підпису
Деякі поля форми названо лише підказкою (атрибут title), прихованим описом або прихованим підписом, тому на екрані підпису немає. Це рекомендована практика, яка виходить за межі рівня WCAG 2.2 AA, на який спираються закони про доступність.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Покупці бачать порожнє поле й мусять вгадувати, що туди вводити: телефон, поштовий індекс чи промокод. Підказка з'являється лише при наведенні миші й ніколи на телефоні, а плейсхолдер зникає, щойно людина починає вводити текст. Люди, які керують сайтом голосом, не можуть назвати поле, якого не бачать.
Кого це стосується
- люди з когнітивними труднощами або проблемами з пам'яттю
- літні покупці
- користувачі голосового керування
- покупці зі смартфонів
Як виправити
Додайте до кожного input, select і textarea видимий <label>, пов'язаний через for та id, або загорніть поле в label. Не використовуйте атрибут title, aria-describedby чи візуально прихований підпис як єдину назву і не вважайте плейсхолдер підписом. Для компактних полів, як-от пошук чи підписка на розсилку, залиште короткий видимий підпис поруч із полем.
У Shopify
Зазвичай трапляється у формах розсилки, пошуку чи власних формах контактів у секціях або сніпетах теми, де підпис приховано й видно лише плейсхолдер. Зробіть підпис видимим у Liquid і CSS цієї секції; для форм, доданих застосунками, зверніться до розробника застосунку.
У Shoptet (CZ)
Залежить від шаблону. Перевірте налаштування шаблону або новішу його версію; якщо підпис є, але прихований, його можна показати власним CSS через можливості власного коду Shoptet. Інакше зверніться до Shoptet або партнера.
У PrestaShop
Зазвичай це шаблони модулів розсилки, пошуку чи контактів. Перевизначте .tpl-файл модуля у своїй темі й покажіть справжній підпис замість плейсхолдера чи title.
У WooCommerce
Зазвичай причина в темі, плагіні форм або конструкторі сторінок, які ховають підписи заради мінімалістичного вигляду. Увімкніть підписи в налаштуваннях плагіна форм або покажіть їх через шаблони чи CSS дочірньої теми.
Стандарти
Це не критерій WCAG, а рекомендована практика, що робить сайт зручнішим.
Автоматична перевірка: правило axe-core label-title-only.
dequeuniversity.com, github.com, www.w3.org