What does this accessibility issue mean?
Accessibility issue summary: Page has duplicate active element IDs
Element IDs should be unique to avoid causing issues for assistive technologies that use the id attribute to locate and navigate to specific elements on a page.
To comply with web accessibility best practices, active elements on a page should not have the same id attribute value as another element and should be both in the active DOM and part of the accessibility tree.
This accessibility issue is related to WCAG rules around Parsing (WCAG Level A).
Solution:
Ensure every active element has a unique ID attribute;do not reuse the same ID attribute on multiple active elements.
Example HTML violation: Duplicate active element IDs (WCAG Level A Issue)
<button id="blue-button">Press Me!</button>
<button id="blue-button">No, Press Me!</button>
<script>
function myFunction() {
alert('Hello, World!');
}
function myFunction2() {
alert('Hello, Mars!');
}
</script>The above HTML violates the duplicate-id-active accessibility rule because it includes two active, focusable elements (buttons) with the same id attribute (blue-button). According to this rule, every active, focusable element must have a unique id value.
How to fix "Duplicate active element IDs (WCAG Level A Issue)" issue
<button id="blue-button">Press Me!</button>
<button id="green-button">No, Press Me!</button>
<script>
function myFunction() {
alert('Hello, World!');
}
function myFunction2() {
alert('Hello, Mars!');
}
</script>In this corrected version, I have ensured that each button has a unique id value (blue-button for the first one and green-button for the second one). maintaining accessibility in online content is vital to ensure that all users, including those with disabilities, can interact with your content without issues. This includes ensuring unique id attributes for active, focusable elements. For more information, you can refer to the W3C's Web Content Accessibility Guidelines, specifically WCAG 2.1.
