Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Duplicate ID attribute values (WCAG Level A Issue)

How to fix the website accessibility issue of duplicate HTML id attributes

Parsing - Lumar Website Accessibility Issues Thumbnail
NULL NULL
 

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.

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

 

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>&nbsp; <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.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform