Fix nested-interactive axe errors
An interactive control contains another focusable control, creating ambiguous focus and activation behavior.
Кого затрагивает
Keyboard, screen-reader and switch-device users navigating and activating interactive controls.
Связь с WCAG
4.1.2 Name, Role, Value (A)
Обнаружение
wcagc reports focusable descendants inside interactive ancestors such as buttons and links.
Почему возникает эта ошибка
- A card-wide link wraps secondary buttons.
- A button component is used to style an anchor child.
- A clickable container receives tabindex while containing native controls.
Проблемная разметка
<button type="button"><a href="/checkout">Checkout</a></button>Исправленный код
<a class="button" href="/checkout">Checkout</a>Проверьте исправление вручную
Tab to the control and activate it with Enter, Space and a screen reader. There should be one focus stop, one announced role and one predictable action.
Границы автоматизации
Static semantics cannot reveal every scripted click handler or focus target. Test pointer, keyboard and assistive-technology activation after restructuring the markup.
Источники и стандарты
Метаданные правила и ссылка Deque генерируются из axe-core 4.12.1. Ссылка W3C ведёт на нормативное руководство WCAG для соответствующего критерия.
Вопросы разработчиков
Can CSS make a link look like a button?
Yes. Choose the semantic element from the action: anchors navigate and buttons perform an in-page action. Styling does not need to change that meaning.
How should I build a clickable card with actions?
Keep the card container non-interactive, add one normal link for the primary destination, and keep secondary controls as separate siblings.
Одно нарушение редко встречается в одиночку
Запустите проверку страницы в wcagc, чтобы найти это правило, связанные проблемы WCAG, затронутые селекторы и пункты, требующие ручной оценки.
Проверить страницу