WCAG 4.1.2 Назва, роль, значення

Критерій успіху 4.1.2 потрібен для того, щоб програми зчитування з екрана, голосове керування та інші допоміжні технології могли зрозуміти кожен елемент керування на сторінці й працювати з ним. Користувач програми зчитування з екрана чує «кнопка, Додати в кошик»; користувач голосового керування каже «натиснути Додати в кошик». Якщо елемент керування не має назви, має неправильну роль чи стан, який ніколи не оновлюється, ці користувачі не можуть робити покупки. Це рівень A, і в EN 301 549 він є пунктом 9.4.1.2 (в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

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

• назву і роль можна визначити програмно;
• стани, властивості й значення, які може задавати користувач, можна задати програмно;
• повідомлення про зміни цих елементів доступні браузерам, зокрема допоміжним технологіям.

W3C зазначає, що критерій адресований насамперед авторам, які створюють чи програмують власні компоненти. Стандартні елементи керування HTML, використані відповідно до специфікації, уже йому відповідають. Власні віджети — меню, вкладки, акордеони, повзунки, власні списки вибору — потребують ролей і станів, заданих через ARIA, і ці стани мають змінюватися разом із віджетом.

Типові помилки в інтернет-магазині

• кнопки лише з іконкою (кошик, пошук, закрити, сердечко обраного) без тексту і без aria-label;
• посилання із зображенням товару, де зображення не має альтернативного тексту, тож у посилання немає назви;
• вибір розміру чи кольору з елементів div з обробниками кліку, без ролі і стану вибору;
• кнопка мобільного меню, aria-expanded якої залишається «false», коли меню відкрите;
• поля форми без мітки або список вибору без назви;
• елементи, приховані через aria-hidden="true", які все одно отримують фокус клавіатури;
• iframe для відео, мап чи оплати без title;
• атрибути ARIA з помилками в написанні, не дозволені для ролі або з недійсними значеннями.

Як перевірити

Автоматично: наш сканер запускає для цього критерію багато правил, серед них button-name, link-name, label, select-name, input-button-name, frame-title, aria-hidden-focus, nested-interactive, aria-required-attr, aria-valid-attr-value та інші правила ARIA (див. список правил). Він повідомляє про кожен елемент із порушенням разом із його селектором. Він не може оцінити, чи назва змістовна і чи оновлюються стани під час використання елемента керування.

Вручну: скористайтеся програмою зчитування з екрана (NVDA у Windows, VoiceOver на macOS чи iOS) і пройдіть шапку, сторінку товару й оформлення замовлення. Для кожного елемента керування слухайте, чи є розумна назва, правильна роль і поточний стан. Відкрийте й закрийте меню, акордеони та вибір варіантів і перевірте, що зміни стану озвучуються.

Як виправити

• Використовуйте нативні елементи: <button> для дій, <a href> для посилань, <input>, <select> з <label>.
• Дайте елементам керування лише з іконкою доступну назву — візуально прихованим текстом чи aria-label.
• Для власних віджетів дотримуйтеся шаблону ARIA Authoring Practices і оновлюйте aria-expanded, aria-checked, aria-selected разом з інтерфейсом.
• Ніколи не розміщуйте елементи, що отримують фокус, усередині вмісту з aria-hidden; дайте кожному iframe title.

Пов'язані критерії

• 1.1.1 Нетекстовий вміст — текстові альтернативи для зображень.
• 2.5.3 Маркування в назві елемента — доступна назва містить видиму мітку.
• 3.3.2 Маркування або інструкції — видимі мітки для полів форми.

Часті запитання

Що означає назва, роль, значення?

Назва — це те, як називається елемент керування («Додати в кошик»), роль — що це за елемент (кнопка, посилання, прапорець), а значення чи стан — його поточне налаштування (позначено, розгорнуто, 3 товари). Допоміжним технологіям потрібні всі три.

Чи відповідають стандартні елементи HTML критерію 4.1.2?

Так, коли їх використовують відповідно до специфікації. Справжні button, посилання, input чи select з міткою передають назву, роль і значення. Проблеми зазвичай виникають із власними елементами керування, зібраними з div і span.

Чи може автоматичний сканер знайти проблеми з 4.1.2?

Він знаходить багато з них: кнопки й посилання без назви, поля форми без мітки, недійсні чи відсутні атрибути ARIA, приховані елементи, які все одно отримують фокус. Він не може визначити, чи назва змістовна і чи стани правильно оновлюються під час використання елемента.

Чи завжди додавання ARIA — це виправлення?

Ні. Нативний елемент HTML зазвичай надійніший, ніж ARIA, доданий до div. Неправильна ARIA може зробити елемент керування гіршим, ніж зовсім без ARIA.