Етикети или инструкции

Какво изисква критерият

Когато от потребителя се изисква да въведе данни — текстово поле, квадратче за отметка, радио бутон, падащо меню, избор на дата, избор на файл — трябва да има етикет или инструкция, указваща каква информация се очаква. Етикетът може да бъде видим текст, елемент <label>, aria-label или aria-labelledby; инструкциите могат да включват изискван формат, допустими стойности или примери.

Задължителни полета, очаквани формати („ДД/ММ/ГГГГ”) и специални ограничения („минимум 8 знака, смесен регистър”) попадат в обхвата на този критерий.

Как да се изпълни изискването

• Всеки елемент <input>, <textarea> и <select> се свързва с елемент <label for="…">, чийто атрибут for съответства на id на полето.
• Placeholder текстът никога не се използва като единствен етикет — placeholder изчезва при фокус и има слаб контраст.
• Задължителните полета се маркират видимо (звездичка, думата „задължително” или aria-required="true") и конвенцията се обяснява в горната част на формата.
• Очакваният формат се уточнява предварително, а не след като потребителят допусне грешка: „Дата (ДД/ММ/ГГГГ)” или „Телефонен номер, напр. 0888-123-456”.
• За групи квадратчета за отметка или радио бутони се използват <fieldset> и <legend> за обозначаване на групата.
• За входни полета само с икона или в ленти с филтри се използва aria-label за задаване на смислено наименование.

Чести грешки

• Форми, в които placeholder текстът е единственият етикет, изчезващ в момента, в който потребителят започне да въвежда.
• Задължителни полета, маркирани само с червени звездички без програмна асоциация.
• Полета за въвеждане на дата на раждане, очакващи определен формат, като потребителят разбира за това едва след неуспешна валидация.
• Полета за търсене, обозначени с икона на лупа и без достъпно наименование.
• Форми за вход, при които полетата за потребителско име и парола са визуално позиционирани до етикетите, но без програмна асоциация помежду им.

Защо е важно

Формите са средата, в която повечето потребители извършват транзакции с уебсайт — регистрация, покупка, контакт, поддръжка, насрочване. Полета без етикети или с недостатъчни етикети изключват напълно потребителите на екранни четци, тъй като те не могат да разберат какви данни очаква всяко поле. Те затрудняват и потребителите с дислексия, губещи контекст в момента, в който placeholder изчезне, и потребителите с когнитивни увреждания, облагодетелствани от предварителни указания за формата.

Освен това етикетите са основополагащи за мениджърите на пароли, автоматичното попълване и програмите за гласово управление — всички те използват текста на етикета за съпоставяне на полетата. Добре обозначена форма е от полза за всички.