• Success Criterion 2.5.3
  • Conformance level A

ARIA Reference Pointing to the Wrong Element for a Name

2.5.3 — Label in Name

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

aria-labelledby (code pointing to the element that names it) referencing wrong element so name ≠ visible label.

Example 

<label id="dosageLabel">Dosage</label>
<input id="dosageInput">

<label>Refill quantity</label>
<input aria-labelledby="dosageLabel" id="qtyInput">

Why it matters

The quantity field announces itself as 'Dosage,' so a patient saying 'click Refill quantity' can't reach it by voice.

How to test

Inspect the aria-labelledby attribute's target id in DevTools: if it references the wrong element, the computed name won't match the visible label.

How to fix

Point aria-labelledby at the id that actually sits next to this specific field, not a copy-pasted one.

<label id="qtyLabel">Refill quantity</label>
<input aria-labelledby="qtyLabel" id="qtyInput">

Outcome

A patient says 'click Refill quantity' and lands in the correct field.

Who is affected

Voice-control users filling out the refill form, and screen reader users who get the wrong field name read aloud.

Learn more

Related scenarios