Етикети на формуляри: как полето получава разбираемо име

Полезно е да знаеш

Формулярът е разговор между страницата и човека, който въвежда данни. За да бъде този разговор ясен, всяко поле трябва да има разбираемо име. HTML елементът label представя надпис за контрол в интерфейса. Той може да бъде свързан с подходящо поле чрез атрибут for, чиято стойност съвпада с неговия идентификатор, или чрез поставяне на контрола вътре в етикета. Така връзката не се изчерпва с визуалната близост на два елемента върху екрана. [1]

При правилно свързан етикет активирането на надписа може да насочи фокуса към съответния контрол. Това увеличава и използваемата област за взаимодействие. [1] Практическият смисъл е лесен за наблюдение при малка отметка: човекът може да избере текста към нея, вместо да цели само квадратчето. Но ако стойността на for сочи към друг идентификатор, видимият ред може да изглежда правилен, а действието да засяга грешното поле. Затова структурата трябва да бъде проверена чрез поведение.

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

Понякога интерактивен елемент няма видим текст, например бутон само с иконка за затваряне. В подходящите случаи aria-label може да предостави достъпно име. [2] Това обаче не е основание всеки видим етикет да бъде заменян с невидим атрибут. Когато има подходящ текст, който може да бъде свързан с елемента, той е важна част от общото разбиране на интерфейса. Нуждата от достъпно име и нуждата човекът да вижда ясна инструкция трябва да се обсъждат заедно.

В пример с форма за търсене е полезно да разграничим име на полето, примерна стойност и съобщение за грешка. „Търсене по заглавие“ описва задачата, „Например: астрономия“ предлага пример, а „Въведи поне една дума“ обяснява конкретен неуспех. Ако тези роли се смесят, посетителят може да види красив текст, но да остане без достатъчно указания след започване на въвеждането. Добре описаният формуляр има отделно предназначение за всяка от тези части.

При окончателна проверка преминаваме през полетата в логичен ред, прочитаме надписите и изпитваме всички връзки. После разглеждаме грешките и повторното попълване. Запазва ли се смисълът, когато полето вече има стойност? Разбира ли се коя отметка за какво служи? Така етикетите се превръщат от декоративни думи в проверими части от интерфейса. Точният HTML помага, когато самите имена и инструкциите са избрани според реалната задача на човека.