id attribute values must be unique

Rule Description

The value assigned to the id="" attribute must be unique to prevent the second instance from being overlooked by assistive technology. Put another way, id attributes may not be used more than once in the same document in order to differentiate each element from another.

The Algorithm, in Simple Terms

Ensures that each element on the page with an id attribute has a unique id attribute value.

Why this is Important

The id attribute uniquely identifies elements on a page. It does not make sense to duplicate an id.

Duplicate ids can break the accessibility of labels for forms, table header cells, etc., by the second instance being skipped by screen readers, or by client-side scripts. They are common markup validation errors that can eliminate possible sources of accessibility problems, when not breaking accessibility.

Those experienced with client-side scripting know that when you re-use an id, typically the only one that gets acted upon by the scripting is the first instance of the use of that id. Similarly, assistive technologies may, when referencing an id, only reference the first one accurately.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
  • Deafblindness
Severity: Critical
Issue Type:
  • WCAG 2.0 (A): MUST
  • WCAG 2.1 (A): MUST
WCAG Success Criteria:
  • 4.1.1 Parsing
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Rename attributes that reuse an id.

Duplicate IDs are common validation errors that can break the accessibility of labels for forms, table header cells, etc.

To fix the problem, change an id value if it is used more than once to be sure each is unique. This will differentiate each element from another and prevent invalid markup, wherein only the first instance gets acted upon by client-side scripting, or where assistive technologies typically only reference the first one accurately.

Good markup eliminates at least one possible source of accessibility problems. WCAG 1.0 used to have a provision which explicitly required the use of valid markup. That requirement has been taken out of WCAG 2.0. We mention it here, because valid markup is a quick path toward ensuring accessibility. There are hundreds of ways a person can create invalid markup. Most of these ways are usually inconsequential for accessibility such as, un-encoded ampersands, for instance. Others, however, are very important and may cause issues relating to how assistive technology interacts with the page and renders the page to the end user, such as subsequent instances of element attribute ids being ignored.

One way to test the validity of HTML markup in order to quickly identify reused attribute id values is to submit the code through the W3C validator at http://validator.w3.org.

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: duplicate-id