id attribute values must be unique
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
id attribute uniquely identifies elements on a page. It does not make sense to duplicate an
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.
How to Fix the Problem
Rename attributes that reuse an
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.
- HTML 4