Back to Learn
Pulseaccessibility

ARIA IDs Are Unique

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