id attribute value must be unique

Duplicate ID's 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.

Fixing the problem

Rename any duplicate ID attributes values.

Duplicate IDs are common validation errors that may break the accessibility of labels, e.g., form fields, table header cells.

To fix the problem, change an ID value if it is used more than once to be sure each is unique. Unique ID's 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.

Proper 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. WCAG 2.0 no longer requires valid markup. 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 significant 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 ID's being ignored.

Submit markup code to the W3C validator at http://validator.w3.org to the validity of HTML markup in order to quickly identify reused attribute ID values.