Головна
Правила
Прихована назва кнопки відрізняється від видимого тексту

Вимога WCAG A/AA Пріоритет: Помірно · експериментальна перевірка: варто перевірити вручну

Прихована назва кнопки відрізняється від видимого тексту

Деякі кнопки чи посилання показують на екрані один текст, але мають іншу приховану назву (aria-label), у якій немає видимих слів, наприклад кнопка «Купити зараз» із назвою «Надіслати».

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

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

Кого це стосується

користувачі голосового керування
люди з руховими порушеннями, які не можуть користуватися мишею
користувачі програм зчитування з екрана з частковим зором
люди з когнітивними порушеннями

Як виправити

Доступна назва має містити видимий текст, найкраще на початку й у тому самому порядку. Часто найпростіше прибрати aria-label, щоб назвою став видимий текст. Якщо потрібен додатковий контекст, додайте його після видимих слів: видимий текст «Додати в кошик» перетворюється на aria-label «Додати в кошик: синя футболка». Перевірте й перекладені сторінки: aria-label, що залишився англійською на українській сторінці, теж є помилкою.

У Shopify

Зазвичай це атрибути aria-label у фрагментах теми (картки товарів, кнопки кошика) або в застосунках. Змініть фрагмент Liquid так, щоб aria-label містив видимий текст, або приберіть його, і перевірте, що переклади теми охоплюють ці назви.

У Shoptet (CZ)

Зазвичай це розмітка шаблону, яку можна змінити лише частково. Повідомте про проблему підтримку Shoptet; у власних HTML-блоках приберіть aria-label або узгодьте його з видимим текстом.

У PrestaShop

Зазвичай це шаблони .tpl теми або модулі. Змініть aria-label у шаблоні так, щоб він містив видимий текст, і перевірте його переклади в налаштуваннях перекладів теми.

У WooCommerce

Зазвичай це шаблони теми або плагіни, які додають aria-label до кнопок «Додати в кошик» і посилань. Перевизначте шаблон у дочірній темі або зверніться до розробника плагіна та перевірте, що переклади охоплюють тексти aria-label.

Стандарти

Стандарти
Стандарт	Пункт
WCAG 2.2	2.5.3 (A) Label in Name
WCAG 2.1	2.5.3 (A) Label in Name
EN 301 549 4.1.1	9.2.5.3
EN 301 549 3.2.1	9.2.5.3
ДСТУ EN 301 549 2022	9.2.5.3

Автоматична перевірка: правило axe-core label-content-name-mismatch. dequeuniversity.com, github.com, www.w3.org

Усі правила, які ми перевіряємо