WCAG 1.3.5 Определение назначения поля ввода

Критерий успеха 1.3.5 упрощает формы для людей с когнитивными нарушениями, нарушениями памяти или моторики. Когда поле в коде сообщает, для чего оно, — «это email», «это почтовый индекс», — браузеры могут заполнить его, а вспомогательные инструменты — показать знакомые иконки или подписи. Критерий добавлен в WCAG 2.1, это уровень AA и часть EN 301 549 (пункт 9.1.3.5). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Назначение каждого поля ввода, собирающего информацию о пользователе, должно быть программно определяемым, когда:

• поле служит одной из целей из списка WCAG Input Purposes for User Interface Components (раздел 7 WCAG 2.1 и 2.2) — например name, given-name, family-name, email, tel, street-address, address-line1, postal-code, country, organization, bday, cc-name, cc-number, cc-exp, username, new-password, current-password; и
• технология это поддерживает. В HTML поддерживает — через атрибут autocomplete.

Это касается только данных о пользователе. Поле для промокода, поиска товара или данных другого человека сюда не относится.

Типичные ошибки в интернет-магазине

• поля имени, email, телефона и адреса при оформлении заказа без autocomplete;
• autocomplete="off", заданный для всей формы оформления заказа «ради безопасности»;
• недопустимые или неверные значения, например autocomplete="zip" или autocomplete="name" у поля email;
• отдельные адреса для оплаты и доставки без токенов billing и shipping, из-за чего браузер заполняет не тот адрес;
• поля регистрации и входа без username, new-password или current-password.

Как проверить

Автоматически: наша проверка отмечает значения autocomplete, которые недопустимы или не подходят полю (правило допустимое значение autocomplete). Она не может определить, запрашивает ли поле без autocomplete данные о самом пользователе, поэтому отсутствующие атрибуты требуют ручной проверки.

Вручную: составьте список всех форм: регистрация, вход, личный кабинет, оформление заказа, подписка на рассылку, обратная связь. Для каждого поля с личными данными пользователя посмотрите код и сверьте значение autocomplete со списком WCAG. Проверьте, что автозаполнение браузера заполняет нужные поля.

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

• Добавьте каждому полю правильный токен, например <input type="email" autocomplete="email">.
• Для адресов используйте токены разделов: autocomplete="shipping postal-code" и autocomplete="billing postal-code".
• Уберите autocomplete="off" с полей личных данных.
• В Shopify, WooCommerce и на других платформах проверьте, не переопределяют ли тема и плагины формы оформления заказа и личного кабинета; стандартные настройки платформы, возможно, уже задают эти значения.

Связанные критерии

• 1.3.1 Информация и взаимосвязи — подписи, связанные с полями.
• Чек-лист WCAG 2.2 — включая 3.3.7 «Избыточный ввод» и 3.3.8 «Доступная аутентификация».
• Правила, которые проверяет наш сервис — все автоматические правила.

Частые вопросы

Каким полям нужен атрибут autocomplete?

Полям, которые собирают информацию о самом пользователе и соответствуют одному из назначений из списка WCAG, например name, email, tel, street-address, postal-code, country, cc-number или new-password.

Распространяется ли 1.3.5 на адрес получателя подарка?

Критерий ограничен информацией о пользователе. Поля о другом человеке не обязаны сообщать своё назначение, хотя добавление токенов shipping всё равно может помочь.

Является ли autocomplete="off" нарушением?

Для поля, которое собирает данные о самом пользователе из списка WCAG, — да: назначение должно быть программно определяемым, а «off» его не обозначает.

Что находит автоматическая проверка?

Наша проверка отмечает значения autocomplete, которые недопустимы или не подходят полю. Она не может знать, запрашивает ли поле без autocomplete данные о самом пользователе, поэтому отсутствующие атрибуты нужно проверять вручную.