What does this accessibility issue mean?
Accessibility issue summary: Elements on the page have the same ID attribute value
HTML id attributes are used to point to style declarations in style sheets or can be used by JavaScript to manipulate elements with a certain id. All elements on a page that use an id attribute should have unique tags — do not use the same id attribute on multiple elements used on a page.
Having duplicate id attributes used on multiple elements on a page can cause issues for assistive technologies when trying to locate and navigate to specific elements on the page.
This accessibility issue is related to WCAG rules around Parsing (WCAG Level A).
Solution:
Ensure every ID attribute value is unique.
Example HTML violation: Duplicate ID attribute values (WCAG Level A Issue)
<div id="header" role="banner">
<h1 id="logo">Shopee</h1>
<nav id="logo" role="navigation">
<ul>
<li>
<a href="products.html">Products</a>
</li>
<li>
<a href="cart.html">Cart</a>
</li>
<li>
<a href="checkout.html">Checkout</a>
</li>
</ul>
</nav>
</div>
<h2>Featured products</h2>
<article>
<header>
<h4>Product Name</h4>
</header>Product Description <a id="buy" href="#buy" aria-describedby="buy">Buy Now</a>
</article> <footer role="contentinfo">Copyrights 2023 </footer>This HTML violates the 'Duplicate ID used in ARIA and labels' accessibility rule (Rule ID: 'duplicate-id-aria') because it uses duplicate IDs in elements (id='logo' in both the h1 element and the nav element and id='buy' in both the a element and aria-describedby attribute).
IDs used in ARIA and labels must be unique because assistive technologies use these IDs to create relationships between different parts of the page. When a duplicate ID is used, assistive technologies might only recognize the first occurrence, which can lead to a confusing and difficult user experience for people using these technologies.
The corrected HTML will look like this:
How to fix "Duplicate ID attribute values (WCAG Level A Issue)" issue
<div id="header" role="banner">
<h1 id="logo">Shopee</h1>
<nav id="main-nav" role="navigation">
<ul>
<li>
<a href="products.html">Products</a>
</li>
<li>
<a href="cart.html">Cart</a>
</li>
<li>
<a href="checkout.html">Checkout</a>
</li>
</ul>
</nav>
</div>
<h2>Featured products</h2>
<article>
<header>
<h4>Product Name</h4>
</header>
<p id="prod-description">Product Description</p>
<a id="buy-link" href="#buy" aria-describedby="prod-description">Buy Now</a>
</article>
<footer role="contentinfo">Copyrights 2023 </footer>By giving each element unique ID. As such, all elements that used duplicate IDs now have their unique IDs (id='logo' and id='main-nav' and id='buy-link' and id='prod-description'), which ensures that assistive technologies can correctly identify and build relationships between different parts of the page.
For more info about the rule, read 'Duplicate ID used in ARIA and labels' by Web.dev. - To understand more about accessibilities, read A11Y Project. - To validate your HTML, use tool like W3C Markup Validation Service.
