Наименование, роля, стойност

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

Всеки интерактивен елемент на страницата — бутони, връзки, полета на форма, раздели, плъзгачи, персонализирани уиджети — трябва да предоставя три вида информация на помощните технологии:

• Наименование — как се казва този елемент? („Изпрати”, „Затвори диалог”, „Сила на звука”)
• Роля — какъв вид елемент е? (бутон, връзка, квадратче, раздел, плъзгач)
• Стойност / състояние — за компонентите, при които е приложимо: натиснат ли е, разгънат ли е, отметнат ли е, избран ли е? Каква е текущата стойност?

Предоставянето трябва да е програмно — зададено в DOM, а не нарисувано с CSS. Екранните четци, брайловите дисплеи,софтуерът за гласово управление и скенерите с превключватели четат дървото на достъпността, а не пикселите.

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

• Използвайте естествения HTML елемент винаги, когато такъв съществува. <button> идва с правилната роля, фокус, управление от клавиатура и достъпно наименование от текстовото си съдържание — безплатно.
• За бутони само с икона добавете aria-label (или визуално скрит текст). <button aria-label="Затвори">×</button>.
• За полета на форма свържете <label for> с id на полето. Или обвийте полето в <label>. Placeholder текстът не е етикет.
• Когато трябва да изградите персонализиран уиджет от <div> и <span>, добавете role="…", управлявайте tabindex, обработвайте Enter и Space и отразявайте състоянието с aria-pressed, aria-expanded, aria-checked, aria-selected, aria-valuenow.
• Прекарайте изобразената страница през инспектора на дървото на достъпността на браузъра (Chrome DevTools → Elements → Accessibility) и прочетете всеки елемент: всеки трябва да се обявява като наименование + роля + състояние.

Чести грешки

• <div onclick="…"> стилизиран като бутон — без роля, без клавиатура, без наименование. Екранните четци го пропускат. Гласовото управление не може да каже „щракни Запази”.
• <div role="button"> без tabindex="0", без обработчик за Enter/Space — изглежда достъпен, но не е.
• Бутони само с икона (<button><svg /></button>) без aria-label, aria-labelledby или визуално скрит текст. Обявяват се просто като „бутон”.
• Персонализирани падащи менюта, изградени с <div> и JavaScript, при които липсват role="combobox", aria-expanded, aria-controls и ролите listbox/option отдолу.
• Бутони за превключване (заглушаване, добавяне в любими, следване), при които визуалното състояние се променя, но aria-pressed никога не се актуализира. Зрящите потребители виждат промяната; потребителите на екранни четци не чуват разлика.
• Полета на форма с визуален етикет до тях, но без връзка for/id или обгръщащ <label>.
• Персонализирани квадратчета, нарисувани с <svg> и скрит нативен елемент input, при които :checked не се отразява към видимия потребителски интерфейс — състоянията на екранния четец и визуалното се разминават.

Защо е важно

Това е най-цитираният критерий в спецификацията. Почти всяка жалба от рода на „този сайт е неизползваем с екранен четец” се свежда до грешка по 4.1.2 — обикновено <div>, маскиран като бутон, или бутон с икона без наименование. Тук се проявява и цената на изграждането на персонализирани уиджети: всеки нативен HTML елемент вече отговаря на 4.1.2; всеки ръчно изграден <div> уиджет трябва да го „спечели” ред по ред. Най-бързият одит по 4.1.2 е да се обходи страницата с Tab с включен екранен четец и да се слуша — всичко, което се обявява като „празно” или просто „бутон”, е находка.