• June 1, 2025

Ensuring Unique ARIA IDs for Accessibility

Rule ID: duplicate-id-aria
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

To resolve this issue, make sure every id attribute used in your HTML document—especially those referenced by ARIA attributes or label elements—is unique.

Steps:

1. Locate Duplicate IDs:
   Use validation tools (like browser dev tools or automated testing frameworks) to identify elements that share the same id value.

2. Rename Conflicting IDs:
   Assign a distinct, meaningful value to each id attribute. A good convention might include component type or index to maintain clarity and uniqueness. For example:

   html

   KopierenBearbeiten

   <label for="email-input-1">Email:</label>
<input id="email-input-1" type="email" name="email">


3. Update References:
   Anywhere an id is referenced (such as aria-labelledby, aria-describedby, or for attributes), be sure to update those references to match the newly assigned unique ID.

4. Use Programmatic Checks:
   Employ automated tools like axe-core, Lighthouse, or Deque’s accessibility tools to recheck the document after making changes.

⚠️ Note: ID values must begin with a letter (A–Z or a–z) and can include digits (0–9), hyphens (-), underscores (_), colons (:), and periods (.), but they must be unique across the document.

Why it Matters

Using duplicate IDs can severely impact assistive technologies like screen readers and keyboard navigation. Here’s why:

• Accessibility Impact: When IDs are reused, screen readers and browsers may only recognize the first instance, ignoring others. This leads to missing or incorrect associations between labels and form fields or ARIA relationships, confusing users.

• Script and Style Conflicts: JavaScript and CSS rely on unique IDs to target elements. Reusing IDs causes unpredictable behavior, which might include form submission failures or incorrect styling.

• Standards Compliance: Violating uniqueness rules breaks HTML validity and fails WCAG success criterion 4.1.1 (Parsing).

Ensuring ID uniqueness helps maintain semantic clarity and a reliable, accessible user experience.

Rule Description

Each element with an id attribute must have a value that is unique within the document. This is especially critical when the ID is referenced by ARIA attributes (e.g., aria-labelledby, aria-describedby) or label for attributes. Reusing an ID can cause assistive technology to ignore subsequent elements or misrepresent them to users.

The Algorithm (in Simple Terms)

1. Scan the document for all ID attributes.

2. Check if any value is used more than once.

3. If duplicates exist, flag each repeated occurrence.

4. Ensure ARIA and label references also point to unique, valid IDs.