ID attribute values must be unique

Rule ID: duplicate-id
User Impact: Minor
WCAG: 4.1.1

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blind
  • Deafblind

Requirement(s)

  • WCAG 2.0 (A): MUST

WCAG Success Criteria

  • 4.1.1 Parsing

Section 508 Guidelines

  • Not specified, or not applicable

Rule Description

The value assigned to an 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 to differentiate each element from another.

Why it Matters

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

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.

How to Fix 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.

The Algorithm (in simple terms)

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