ID attribute value must be unique

Rule ID: duplicate-id-active
Ruleset: axe-core 3.2
User Impact: Critical
WCAG: 4.1.1

Accessibility Testing Designed for Developers - No Training Required

Join Deque's exclusive beta testing community and help us reach our goal of accessibility as standard part of every sprint by 2022.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blindness
  • Deafblindness

Requirement(s)

  • WCAG 2.1 (A): MUST
  • WCAG 2.0 (A): MUST

WCAG Success Criteria

  • 4.1.1 Parsing

Section 508 Guidelines

  • Not specified or not applicable

How to Fix the Problem

Rename attributes that reuse an ID on focusable elements.

Duplicate IDs are common validation errors that can break the accessibility of labels for focusable elements, 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 focusable 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 ID's 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.

Why this is Important

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

Duplicate ID's can break the accessibility of focusable elements including labels for forms, table header cells, etc., Screen readers and client-side scripts will skip any duplication other than the first instance. Duplicate IDs 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.

Rule Description

The value assigned to the ID attribute on focusable elements 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 on focusable elements in the same document in order to differentiate each focusable element from another.

The Algorithm (in simple terms)

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

Resources

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 3.2 rules.

Was this information helpful?

You have already given your feedback, thank you.

Your response was as follows:

Was this information helpful ?
Date/ Time feedback was submitted :