WCAG 3.3.2 Маркування або інструкції

Критерій успіху 3.3.2 потрібен для того, щоб кожен знав, що вводити у форму. Зрозумілі мітки, видимі позначки обов'язкових полів і короткі підказки щодо формату допомагають людям з когнітивними порушеннями, старшим користувачам, користувачам програм зчитування з екрана і всім, хто оформлює замовлення на маленькому телефоні. Це рівень A, і в EN 301 549 він є пунктом 9.3.3.2 (в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Мітки чи інструкції потрібні, коли вміст вимагає введення від користувача. W3C зазначає, що «вимагає» означає приймає або очікує введення, тож необов'язкові поля теж враховуються.

• Мітка — це текст (або компонент із текстовою альтернативою), показаний усім користувачам, щоб ідентифікувати елемент керування. Це не обов'язково HTML-елемент <label>, але її мають бачити всі — на відміну від доступної назви, яка може бути прихованою.
• Інструкції пояснюють очікувані дані чи формат, наприклад «Дата народження (ДД.ММ.РРРР)», які поля обов'язкові або чого стосується група перемикачів.

Мета — корисні підказки без перевантаження: не кожному полю потрібен абзац, але ніхто не повинен вгадувати.

Типові помилки в інтернет-магазині

• поля оформлення замовлення лише з текстом-заповнювачем, який зникає, щойно користувач починає вводити;
• поле телефону чи картки, розбите на кілька клітинок без мітки для кожної частини;
• обов'язкові поля позначено лише червоною зірочкою без пояснення, що вона означає;
• перемикачі варіантів доставки чи прапорці згоди без мітки групи;
• поле кількості, пошуку чи розсилки з іконкою, але без видимого тексту;
• незвичний формат (ідентифікатор ПДВ, правила пароля) без підказки до того, як користувач помилиться.

Як перевірити

Автоматично: наш сканер запускає правило form-field-multiple-labels, яке позначає поля з більш ніж однією міткою. Пов'язані правила щодо відсутніх доступних назв (як-от label, select-name) наведено в 4.1.2. Чи видима мітка і чи вона зрозуміла, оцінює людина.

Вручну: пройдіть кожну форму. Для кожного поля перевірте, що є видимий текст, який залишається на екрані під час введення, що обов'язкові поля позначено текстом, що групи варіантів мають заголовок чи legend і що особливі формати пояснено до введення.

Як виправити

• Дайте кожному полю видимий <label for="…">; заповнювачі залишайте лише для прикладів.
• Групуйте перемикачі й прапорці в <fieldset> з <legend>.
• Позначайте обов'язкові поля в мітці («Email (обов'язково)») або поясніть зірочку вгорі форми.
• Додайте коротку підказку щодо формату й пов'яжіть її через aria-describedby.

Пов'язані критерії

• 3.3.1 Виявлення помилок — що відбувається, коли введено неправильно.
• 4.1.2 Назва, роль, значення — програмна назва кожного поля.
• 1.3.5 Призначення полів уведення — автозаповнення для полів з особистими даними.

Часті запитання

Чи достатньо тексту-заповнювача як мітки?

Це ризиковано. Заповнювач зникає, щойно користувач починає вводити, часто має низьку контрастність і не завжди зачитується допоміжними технологіями. Надійне рішення — видима мітка, що залишається на екрані.

Чи стосується 3.3.2 лише обов'язкових полів?

Ні. W3C пояснює, що «вимагає» тут означає приймає або очікує введення, тож мітки чи інструкції потрібні й необов'язковим полям.

Чи треба позначати обов'язкові поля?

Це очікуваний спосіб виконати 3.3.2, коли деякі поля обов'язкові: W3C зараховує позначення обов'язкових полів у мітці чи legend до достатніх технік. Використовуйте текст або пояснений символ, а не лише колір.

Чим 3.3.2 відрізняється від 4.1.2?

3.3.2 стосується міток та інструкцій, які бачать усі користувачі. 4.1.2 стосується доступної назви, яку читають програми. Поле може мати приховану назву і все одно не мати видимої мітки.