Рекомендуемая практика Приоритет: Серьёзно
У полей формы нет видимой подписи
Некоторые поля формы названы только всплывающей подсказкой (атрибут 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