Fix button-name axe errors
A button has no accessible name, so assistive-technology users cannot tell which action it performs.
Кого затрагивает
Screen-reader users, speech-input users, and people navigating interfaces by control name.
Связь с WCAG
4.1.2 Name, Role, Value (A)
Обнаружение
wcagc reports button elements whose computed accessible name is empty after browser name calculation.
Почему возникает эта ошибка
- An icon-only button has no visually hidden text or aria-label.
- The element referenced by aria-labelledby is missing or empty.
- Visible text is hidden from the accessibility tree with aria-hidden.
Проблемная разметка
<button><svg aria-hidden="true">...</svg></button>Исправленный код
<button type="button" aria-label="Open navigation"><svg aria-hidden="true">...</svg></button>Проверьте исправление вручную
Move through the controls with a screen reader and speech input. Confirm that each name describes the action, includes visible text, and remains correct when state changes.
Границы автоматизации
Automation can detect an empty name but cannot determine whether Open, Submit or an aria-label accurately describes the button's real action in context.
Источники и стандарты
Метаданные правила и ссылка Deque генерируются из axe-core 4.12.1. Ссылка W3C ведёт на нормативное руководство WCAG для соответствующего критерия.
Вопросы разработчиков
Do icon-only buttons need text?
They need an accessible name. Visible or visually hidden text is often clearest; aria-label is appropriate when the compact control cannot display text.
Should aria-label replace visible button text?
Usually not. If visible text exists, let it provide the name or make sure the accessible name contains the same words so speech-input users can target it.
Одно нарушение редко встречается в одиночку
Запустите проверку страницы в wcagc, чтобы найти это правило, связанные проблемы WCAG, затронутые селекторы и пункты, требующие ручной оценки.
Проверить страницу