R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Ensuring Unique IDs for Focusable Elements

  • Home
  • Blog
  • Ensuring Unique IDs for Focusable Elements
  • June 1, 2025

Ensuring Unique IDs for Focusable Elements

Rule ID: duplicate-id-active
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: Not specified, or not applicable

How to Fix the Problem

Each id attribute on active or focusable elements must be unique within the HTML document. If more than one focusable element shares the same ID, screen readers and client-side scripts can become confused or only recognize the first occurrence. This can lead to broken associations between labels and inputs, malfunctioning scripts, and a frustrating experience for users relying on assistive technology.

To fix this issue:

  1. Identify all instances of duplicated id attributes on active or focusable elements like form fields, links, buttons, or elements with tabindex attributes.

  2. Assign a unique ID to each of these elements. Avoid using the same ID more than once on a page.

  3. Update any scripts, CSS selectors, or aria-labelledby or aria-describedby attributes that reference the old ID to point to the newly assigned unique IDs.

  4. Use the W3C HTML Validator to check your document for duplicate ID issues and ensure markup validity.

Example:

Incorrect:

html
<input id="email" type="email" name="email">
<label for="email">Email</label><input id=“email” type=“text” name=“confirm-email”>
<label for=“email”>Confirm Email</label>

Correct:

html
<input id="email" type="email" name="email">
<label for="email">Email</label><input id=“confirm-email” type=“text” name=“confirm-email”>
<label for=“confirm-email”>Confirm Email</label>

Why it Matters

The id attribute must be unique to ensure that user agents (like browsers and screen readers) can correctly reference the intended element. Duplicated active IDs undermine this functionality, especially when used with form labels, ARIA attributes, and JavaScript. If assistive technologies can’t determine which element is being referenced, users may be left confused or unable to interact with the element effectively.

Moreover, only the first instance of a duplicate ID is typically recognized by scripts and screen readers. This can lead to unpredictable behavior, making it harder for users to fill out forms or navigate complex interfaces.

Rule Description

Focusable elements with an ID attribute must have a unique value. This uniqueness ensures that client-side scripts and assistive technologies can accurately refer to and interact with each element, especially when the element has meaningful user interaction (i.e., it’s “active”).

The Algorithm (in simple terms)

  1. Scan all focusable elements on the page (e.g., buttons, links, input fields).

  2. Collect their id attribute values.

  3. Check for any duplicate values among these IDs.

  4. Flag any ID value that appears more than once as a violation.

Tags:
Share:

Leave A Comment