Достъпни формуляри: етикети, подсказки и грешки

Шест критерия за успех за формуляри

WCAG 2.2 е актуалната препоръка на W3C за достъпно уеб съдържание. За текстовете на един формуляр най-важни са шест от нейните критерии за успех:

• 1.3.1 Информация и връзки (ниво A): това, което показва оформлението, например кой етикет към кое поле принадлежи, е налично и в кода или в текста.
• 1.3.5 Определяне на целта на въвеждането (ниво AA): полетата, които питат за информация за потребителя, например име или имейл, показват целта си в кода.
• 3.3.1 Идентифициране на грешки (ниво A): ако грешка при въвеждане бъде открита автоматично, полето се посочва, а грешката се описва с текст.
• 3.3.2 Етикети или инструкции (ниво A): етикети или инструкции се предоставят, когато съдържанието изисква въвеждане от потребителя.
• 3.3.3 Предложение за корекция (ниво AA): ако бъде открита грешка и корекцията е известна, тя се предлага, освен ако това би застрашило сигурността или целта на съдържанието.
• 4.1.2 Име, роля, стойност (ниво A): всеки елемент за управление има име и роля, които софтуерът може да прочете.

Всяко поле се нуждае от видим етикет

Етикетът казва какво се въвежда в полето и остава видим, докато потребителят пише. В HTML свържи елемента label с полето: атрибутът for на етикета има точно същата стойност като id на полето. Тогава екранните четци прочитат етикета заедно с полето, а щракване върху етикета поставя курсора в полето. Бутонът получава етикета си от своя текст, а „Изпрати съобщението“ казва повече от „Изпрати“. Етикетите обикновено стоят вдясно от радио бутоните и квадратчетата за отметка и вляво или над другите полета; етикетите над полетата заемат по-малко място по ширина.

Placeholder не е етикет

Сивият текст в празно поле прилича на етикет, но не е. W3C назовава проблемите:

• Той изчезва веднага щом някой започне да пише, затова въведеното е по-трудно да се провери преди изпращане.
• Браузърите често го показват в светъл цвят с твърде слаб контраст.
• Екранните четци не го третират като етикет, а поддръжката е различна.

Използвай placeholder най-много за пример, а всичко важно сложи в етикета или в подсказка.

Подсказки и задължителни полета

• Сложи правилата в подсказка: формата на датата, дължината на клиентския номер, какво трябва да съдържа паролата. В 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 кода на формуляра или даваш адреса на страницата и можеш да добавиш съобщенията за грешка, които показва формулярът ти. Кодът прочита всяко поле: етикета му и откъде идва етикетът, подсказки, placeholder текстове, задължителни полета, стойности на autocomplete и групи от радио бутони или квадратчета за отметка. Той открива проблеми като поле без етикет, placeholder като единствен етикет, задължителни полета, които текстът не споменава, липсващи стойности на autocomplete и неясни съобщения за грешка, всеки със своя критерий за успех. ИИ предлага ясен етикет, кратка подсказка и съобщение за грешка, което посочва полето и казва как да се поправи въведеното. Кодът проверява всяко предложение и създава подобрена чернова на HTML от твоя формуляр.

Do4U открива подсказки и създава чернова, а ти проверяваш и решаваш. Инструментът проверява маркирането, а не стиловете, скриптовете или използването с клавиатура, и не ти казва дали формулярът ти е достъпен. Тествай подобрения формуляр с клавиатура и екранен четец.