На главную
Правила
Скрытое название кнопки отличается от видимого текста

Требование 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

Все правила, которые мы проверяем