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 запитує власні дані користувача, тож відсутні атрибути потребують ручної перевірки.