Back to Learn
Pulseaccessibility

ARIA IDs Are Unique

Ensure IDs used in ARIA attributes are unique in the document.

What This Audit Checks

This audit verifies that IDs referenced by ARIA attributes like aria-labelledby, aria-describedby, aria-controls, and aria-owns are unique within the page. When multiple elements share the same ID, ARIA references become ambiguous.

Why It Matters

When aria-labelledby points to a duplicated ID, the browser picks the first match in the DOM. If that's not the intended label, screen reader users hear the wrong description. This is especially common in server-rendered lists or component-based frameworks that reuse templates.

How to Fix It

  • Generate unique IDs for each instance of a repeated component. Append a unique suffix like an index or UUID.
  • Use React's useId() hook or equivalent framework utilities to generate stable, unique IDs.
  • Audit your templates for hardcoded IDs that get duplicated when the component renders multiple times.
// Bad: hardcoded ID repeated across instances
function Field() {
  return (
    <>
      <label id="email-label">Email</label>
      <input aria-labelledby="email-label" />
    </>
  );
}

// Good: unique ID per instance
function Field() {
  const id = useId();
  return (
    <>
      <label id={`${id}-label`}>Email</label>
      <input aria-labelledby={`${id}-label`} />
    </>
  );
}

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources