Fix duplicate-id-aria axe errors
An ID used by a label or ARIA relationship is duplicated, so the browser may resolve the relationship to the wrong element.
Кого затрагивает
Screen-reader and speech-input users relying on labels, descriptions, controls and active-descendant relationships.
Связь с WCAG
4.1.2 Name, Role, Value (A)
Обнаружение
wcagc reports duplicate ID values when those IDs participate in labels or ARIA ID-reference relationships.
Почему возникает эта ошибка
- A reusable field component hard-codes its id.
- A list renders several copies of a labelled widget without a unique suffix.
- Server and client ID generation produce different or colliding values.
Проблемная разметка
<label for="email">Work email</label><input id="email">
<label for="email">Backup email</label><input id="email">Исправленный код
<label for="work-email">Work email</label><input id="work-email">
<label for="backup-email">Backup email</label><input id="backup-email">Проверьте исправление вручную
Inspect each referenced relationship in the accessibility tree. Confirm that labels, descriptions and controls resolve to the intended unique element after repeated components render.
Границы автоматизации
This rule focuses on IDs used by accessibility relationships. Other duplicate IDs can still break scripts, fragments or CSS even when this specific rule does not report them.
Источники и стандарты
Метаданные правила и ссылка Deque генерируются из axe-core 4.12.1. Ссылка W3C ведёт на нормативное руководство WCAG для соответствующего критерия.
Вопросы разработчиков
Can duplicate IDs change an accessible name?
Yes. ID-based relationships may resolve to the first matching element, so a control can receive the wrong label or description.
Should IDs be generated randomly?
They must be unique and stable across server and client rendering. Framework-provided ID helpers are usually safer than random values created during render.
Одно нарушение редко встречается в одиночку
Запустите проверку страницы в wcagc, чтобы найти это правило, связанные проблемы WCAG, затронутые селекторы и пункты, требующие ручной оценки.
Проверить страницу