У полей формы нет подписей

У некоторых полей формы нет подписи, которую могут прочитать вспомогательные технологии, поэтому непонятно, что в них вводить.

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Пользователи скринридеров слышат только «поле ввода» и не знают, вводить имя, телефон или индекс. При оформлении заказа это прямо ведёт к брошенным заказам. Поля, где подсказка есть только в плейсхолдере, сбивают с толку и пожилых покупателей, когда они начинают печатать.

Кого это касается

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

Как исправить

Свяжите с каждым полем видимый <label for> или поместите поле внутрь label. aria-label используйте, только если видимая подпись действительно невозможна. Плейсхолдер — это не подпись. Проверьте поля поиска, подписки, количества и оформления заказа.

В Shopify

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

В Shoptet (CZ)

Обычно это поля поиска, подписки или контактов в шаблоне. Сначала проверьте настройки шаблона; более глубокие изменения разметки форм обычно делает Shoptet или партнёр.

В PrestaShop

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

В WooCommerce

Проверьте формы оформления заказа, аккаунта и поиска в теме и плагинах форм или оформления заказа. Добавьте подписи в шаблонах дочерней темы или используйте опции плагина, которые выводят настоящие элементы <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

Все правила, которые мы проверяем