Доступні форми: підписи, підказки й повідомлення про помилки

Шість критеріїв успіху для форм

WCAG 2.2 – чинна рекомендація W3C щодо доступного вебвмісту. Для текстів форми найважливіші шість її критеріїв успіху:

• 1.3.1 Інформація та зв’язки (рівень A): те, що показує макет, наприклад який підпис належить до якого поля, доступне також у коді або в тексті.
• 1.3.5 Визначення мети введення (рівень AA): поля, що запитують інформацію про користувача, як-от ім’я чи e-mail, розкривають свою мету в коді.
• 3.3.1 Ідентифікація помилок (рівень A): якщо помилку введення виявлено автоматично, поле названо, а помилку описано текстом.
• 3.3.2 Підписи або інструкції (рівень A): підписи чи інструкції надаються, коли вміст потребує введення від користувача.
• 3.3.3 Пропозиція щодо помилки (рівень AA): якщо помилку виявлено й виправлення відоме, його пропонують, якщо це не загрожує безпеці чи меті вмісту.
• 4.1.2 Назва, роль, значення (рівень A): кожен елемент керування має назву й роль, які може прочитати програма.

Кожному полю потрібен видимий підпис

Підпис каже, що має бути в полі, і залишається видимим, поки користувач пише. У HTML зв’яжи елемент label із полем: атрибут for підпису має точно те саме значення, що й id поля. Тоді програми зчитування з екрана читають підпис разом із полем, а клацання на підписі ставить курсор у поле. Кнопка отримує свій підпис зі свого тексту, і «Надіслати повідомлення» каже більше, ніж «Надіслати». Підписи зазвичай стоять праворуч від перемикачів і прапорців і ліворуч від інших полів або над ними; підписи над полями займають менше місця в ширину.

Заповнювач – не підпис

Сірий текст усередині порожнього поля схожий на підпис, але ним не є. W3C називає проблеми:

• Він зникає, щойно хтось починає писати, тож перевірити введене перед надсиланням складніше.
• Браузери часто показують його світлим кольором із надто слабким контрастом.
• Програми зчитування з екрана не вважають його підписом, і підтримка різниться.

Використовуй заповнювач щонайбільше для прикладу, а все важливе став у підпис або підказку.

Підказки й обов’язкові поля

• Правила став у підказку: формат дати, довжину номера клієнта, вимоги до пароля. У HTML підказку можна зв’язати з полем через aria-describedby, тоді програми зчитування з екрана читають її після підпису.
• Вкажи, які поля обов’язкові, а які ні. Якщо використовуєш зірочку, поясни її один раз на початку форми.
• Інструкції для всієї форми став перед формою, наприклад про обмеження часу.
• Пиши підказки коротко. Забагато інструкцій робить форму складнішою, а не простішою.

Групуй пов’язані поля

Перемикачі й прапорці, що належать разом, групуються елементом fieldset, а елемент legend називає групу, наприклад «Як нам з тобою зв’язатися?». W3C каже, що групи перемикачів слід завжди групувати саме так. Пиши legend коротко, бо деякі програми зчитування з екрана читають його з кожним полем. Групи допомагають також із полями з однаковим підписом, як-от вулиця в адресі доставки й адресі для рахунку.

autocomplete: нехай допомагає браузер

Для полів, що запитують інформацію про користувача, 1.3.5 вимагає, щоб їхню мету можна було визначити в коді. WCAG 2.2 має список таких цілей на основі розділу про автозаповнення специфікації HTML, як-от name, given-name, family-name, email, tel, street-address і postal-code. У HTML їх задають атрибутом autocomplete, наприклад autocomplete="email". Тоді браузери можуть підставляти збережені значення, що заощаджує введення. Полям, які не стосуються користувача, мета не потрібна.

Повідомлення про помилки, що допомагають

Повідомлення про помилку має три завдання: назвати поле, сказати, що не так, і сказати, як це виправити. 3.3.1 вимагає перших двох, текстом, тож самої червоної рамки чи значка недостатньо. 3.3.3 вимагає виправлення там, де воно відоме.

• Показуй повідомлення біля поля й зв’язуй його через aria-describedby, щоб програми зчитування з екрана читали його разом із полем.
• Після надсилання покажи вгорі, перед формою, список усіх помилок під чітким заголовком. Кожен запис називає поле, проблему й виправлення та посилається на поле.
• Онови також заголовок сторінки, наприклад «2 помилки – Контактна форма», і перемісти фокус на перше поле з помилкою.
• Зберігай те, що користувач уже ввів. Це наша порада, а не правило WCAG: необхідність вводити все знову після однієї помилки змушує людей здаватися.

Перевір свою форму з Do4U

Інструмент «Тексти форм» перевіряє тексти вебформи. Ти вставляєш HTML форми або вказуєш адресу сторінки й можеш додати повідомлення про помилки, які показує твоя форма. Код читає кожне поле: його підпис і те, звідки підпис береться, підказки, заповнювачі, обов’язкові поля, значення autocomplete і групи перемикачів чи прапорців. Він знаходить проблеми, як-от поле без підпису, заповнювач як єдиний підпис, обов’язкові поля, про які не згадує текст, відсутні значення autocomplete і розмиті повідомлення про помилки – кожну з її критерієм успіху. ШІ пропонує зрозумілий підпис, коротку підказку й повідомлення про помилку, що називає поле й каже, як виправити введене. Код перевіряє кожну пропозицію й складає з твоєї форми покращену чернетку HTML.

Do4U знаходить підказки й складає чернетку, а перевіряєш і вирішуєш ти. Інструмент перевіряє розмітку, а не твої стилі, скрипти чи використання клавіатури, і не каже, чи доступна твоя форма. Протестуй покращену форму з клавіатурою та програмою зчитування з екрана.