WCAG 2.5.3 Маркування в назві елемента

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

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

Для компонентів інтерфейсу користувача з мітками, що містять текст чи зображення тексту, назва містить текст, поданий візуально.

• «Мітка» — це видимий текст, що ідентифікує елемент керування: текст кнопки, текст посилання чи текст біля поля форми.
• «Назва» — це доступна назва, яку бачать допоміжні технології; вона може походити з текстового вмісту, <label>, aria-label чи aria-labelledby.
• Добра практика за W3C: ставте текст видимої мітки на початок назви. Додаткові слова після нього допустимі.

Елементи керування без видимого тексту (кнопка лише з іконкою) цей критерій не охоплює, хоча за 4.1.2 їм однаково потрібна назва.

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

• кнопка з написом «Купити» і aria-label="Придбати товар";
• кнопка «Пошук», aria-label якої — «Надіслати запит»;
• поле з видимою міткою «Поштовий індекс», тоді як його aria-label каже «ZIP»;
• посилання «Купити зараз» з aria-label="Перейти до літньої колекції";
• перекладені вітрини, де видимий текст перекладено, а жорстко прописаний aria-label залишився англійською.

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

Автоматично: наш сканер порівнює видимий текст елементів керування з їхніми доступними назвами і позначає назви, що не містять видимого тексту (правило label content name mismatch). Правило позначене в axe-core як експериментальне і не охоплює всіх випадків (наприклад, текст на зображеннях чи іконки із символами), тож перегляньте знахідки і вибірково перевірте вручну.

Вручну: перегляньте кнопки, посилання й поля на панелі доступності браузера і порівняйте «Name» з тим, що бачите. Або скористайтеся голосовим керуванням (Voice Control на macOS та iOS, Voice Access на Android) і вимовте «натиснути» та видимий текст важливих елементів керування.

Як виправити

• Надавайте перевагу видимому тексту як назві; додавайте aria-label лише тоді, коли він щось додає.
• Якщо використовуєте aria-label, починайте його з точного видимого тексту: aria-label="Додати в кошик – Лляна сорочка".
• Пов'язуйте поля форми з їхньою видимою міткою через <label for>, а не окремий aria-label.
• Перекладайте значення aria-label разом із видимим текстом.

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

• 2.4.6 Заголовки та маркування — мітки мають описувати призначення.
• 2.4.4 Призначення посилання (в контексті) — текст посилання має казати, куди воно веде.
• 2.1.4 Клавіші для швидких дій — ще один критерій для користувачів голосового введення.

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

Що вимагає WCAG 2.5.3 «Маркування в назві елемента»?

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

Чи є aria-label проблемою для 2.5.3?

Лише коли він замінює видимий текст іншими словами. Кнопка з написом «Купити» і aria-label="Придбати цей товар" — порушення; aria-label="Купити – Лляна сорочка" містить видимий текст і відповідає критерію.

Кому допомагає маркування в назві?

Насамперед людям, які користуються розпізнаванням мовлення: вони кажуть «натиснути Додати в кошик», і це працює, лише якщо доступна назва містить ці слова. Користувачі програм зчитування з екрана теж чують назву, яка збігається з тим, що бачать зрячі користувачі.