This document gives information about the related Monsido checks:
ID attributes must be unique.
What
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.
Why
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.
This check affects the following users who have
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.
User Story
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."
Examples
This section will give some examples of the issue.
Example 1
This example shows HTML code for a menu structure, which fails this check because each menu item uses the same ID value.
<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>
Example 2
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>
How
This section gives information on how to locate this error and what competencies are needed to fix it.
Use the Monsido 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.
Locate the error with Monsido
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 Monsido Web Browser Extension.
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.
Once you know where the errors occur, inform the relevant team so that they can fix the ID attributes in the HTML file.
Who in your team can typically fix this?
Front-end development.
Web team.
Additional Information
This section gives some more resources about this error.
WCAG success criteria