• Success Criterion 4.1.2
  • Conformance level A

Aria-Hidden Attribute Left on Content That’s Now Visible

4.1.2 — Name, Role, Value

Scenario

Setting

A ride-hailing app's trip booking screen

What’s wrong

aria-hidden (code hiding content from screen readers) left on revealed content, or applied to focusable controls (focusable-but-hidden ghosts).

Example 

<div id="fareBreakdown" aria-hidden="true" style="display:none">
  <p>Base fare: $8.50</p>
  <p>Surge: $3.20</p>
</div>
<button onclick="document.getElementById('fareBreakdown').style.display='block'">Show fare details</button>
<!-- the click handler shows the panel but never removes aria-hidden -->

Why it matters

A screen reader user who opens fare details still has that content hidden from them, while sighted riders can read it fully.

How to test

Inspect aria-hidden="true" usage in DevTools: check it's never applied to revealed/visible content or to focusable elements — either case fails.

How to fix

Toggle aria-hidden in the same function that toggles visibility, or drive both from one hidden attribute.

function showFareDetails() {
  const panel = document.getElementById('fareBreakdown');
  panel.style.display = 'block';
  panel.removeAttribute('aria-hidden');
}

Outcome

A rider opens fare details and hears the surge charge before confirming the trip.

Who is affected

Screen reader users checking surge pricing before booking cannot access the fare breakdown once it is visible.

Learn more

Related scenarios