Web Governance
ID attributes must be unique
4.1.1 Parsing
This document gives information about the related accessibility checks:
ID attributes must be unique.
The ID attributes for HTML elements must be unique.
Your webpage is created from HTML code, and each element in the code can have an ID value set via the 'id' attribute. If such IDs are set in the webpage code, they must all be unique, meaning that no two elements can have the same ID value applied.
Ensuring that all ID values are unique is part of complying with the rules for proper code. When you follow these rules, it increases the likelihood that the website will work across different platforms, including assistive technologies like screen readers and dictation software.
This is important not only for users of assistive technologies but also for users who browse websites on a growing number of diverse platforms, such as smart TVs and wearable devices.
On the other hand, a website that does not follow the rules for writing valid HTML code is more likely to crash when accessed from various platforms that are less error-tolerant than a standard desktop web browser.
Sight impairments: These users often access the site contents with a screen reader or other assistive technologies.
Motion impairments: These users often navigate the page with dictation software or other assistive technologies.
No impairments: Other users with no impairments browse the page from a variety of web-enabled devices.
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
"On some websites, things just go haywire. Sometimes, I'll experience the screen reader going completely bonkers. It just keeps reading the same little piece of text over and over again.
Other times, it's like it's just hopping and skipping all over the page, and I have no clue why. I don't have the technical know-how to figure out why it happens or if there's anything I can do about it. When that happens, I just throw in the towel."
This section will give some examples of the issue.
This example shows HTML code for a menu structure, which fails this check because each menu item uses the same ID value.
Web Governance<nav>
<ul>
<li><a href="#" id="menu-item">Home</a></li>
<li><a href="#" id="menu-item">About Us</a></li>
<li><a href="#" id="menu-item">Services</a></li>
<li><a href="#" id="menu-item">Portfolio</a></li>
<li><a href="#" id="menu-item">Contact Us</a></li>
</ul>
</nav> This example shows HTML code for a menu structure, which satisfies this check because each ID value applied to the menu items is unique.
<nav>
<ul>
<li><a href="#" id="menu-item1">Home</a></li>
<li><a href="#" id="menu-item2">About Us</a></li>
<li><a href="#" id="menu-item3">Services</a></li>
<li><a href="#" id="menu-item4">Portfolio</a></li>
<li><a href="#" id="menu-item5">Contact Us</a></li>
</ul>
</nav>This section gives information on how to locate this error and what competencies are needed to fix it.
Use the Web Governance platform to find out if your website has this error. To fix the error, edit the HTML code so that all values for id attributes on a particular page are unique. This usually requires knowledge of HTML and is a task often done by your web developer.
Click Accessibility (icon of a human with arms outstretched) on the menu bar. The Accessibility dashboard opens.
Select Checklist (insect icon) from the menu on the left side of the page.
Select the Level A compliance level to filter for, above the checks list.
Find the check for “id attributes must be unique.” You can use Ctrl+F to assist with this.
Click the Pages button on the same row as a checklist item to view a list of the pages where this issue is found.
Click Inspect Page with browser extension (magnifying glass icon) on the same row as a page in the list to open the page and inspect it with the Web Governance web browser extension.
Once you know where the errors occur, inform the relevant team so that they can fix the ID attributes in the HTML file.
For full instructions, see the user guide article:
How to review an accessibility issue
Front-end development.
Web team.
This section gives some more resources about this error.
In the web browser extension, click Highlight (the magnifying glass icon) to see the location of the error on the page.
The ID attributes error is highlighted in yellow.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
In the web browser extension, click Highlight (the magnifying glass icon) to see the location of the error on the page.
The ID attributes error is highlighted in yellow.
If this content did not answer your questions, try searching or contacting our support team for further assistance.