• Success Criterion 1.3.1
  • Conformance level A
  • W3C reference F2

Text Styled to Look Like a Heading Instead of Coded as One

1.3.1 — Info and Relationships

Scenario

Setting

A ride-hailing app's trip booking screen

What’s wrong

Text is made to LOOK like a heading or emphasized (big, bold, indented) using styling only, so screen readers treat it as ordinary text and users miss the structure.

Example 

<p style="font-size:22px; font-weight:bold;">Trip Summary</p>
<p>Pickup: 5th Ave</p>
<p>Drop-off: Union Station</p>

Why it matters

A rider using a screen reader can't jump to "Trip Summary" the way they'd jump to a heading. They have to listen through every line in order instead.

How to test

Inspect the 'heading' in DevTools: if it's a styled span/div/p instead of an h1-h6 tag, a screen reader won't announce it as a heading — check the Accessibility Tree.

How to fix

A real heading tag lets assistive tech build a navigable outline; bold styling alone builds nothing.

<h2>Trip Summary</h2>
<p>Pickup: 5th Ave</p>
<p>Drop-off: Union Station</p>

Outcome

A rider jumps straight to the trip summary with one keystroke instead of listening through the whole screen.

Who is affected

Screen reader and switch users who navigate by heading shortcuts get no landmark to jump to on the booking screen.

Learn more

Related scenarios