• Success Criterion 1.3.1
  • Conformance level A

ARIA Reference Attribute Pointing to a Nonexistent Element

1.3.1 — Info and Relationships

Scenario

Setting

A grocery delivery app's shopping cart

What’s wrong

aria-labelledby (code pointing to the element that names it)/aria-describedby (code that ties help or error text to a field) pointing at nonexistent IDs.

Example 

<span id="qty-label">Quantity</span>
<input type="number" aria-labelledby="qty-lbl" value="2">

Why it matters

A screen reader user hears only "spin button, 2" with no name at all, since aria-labelledby points to an id that doesn't exist.

How to test

Check aria-labelledby/aria-describedby values in DevTools against the DOM: if they reference an id that doesn't exist anywhere on the page, the reference silently fails.

How to fix

A broken ARIA reference fails silently, so double check every id it points to actually exists on the page.

<span id="qty-label">Quantity</span>
<input type="number" aria-labelledby="qty-label" value="2">

Outcome

A shopper hears Quantity, 2 and adjusts the count with full confidence in what they're changing.

Who is affected

Screen reader users adjusting item quantities in the cart get an unnamed control instead of the intended label.

Learn more

Related scenarios