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

During an audit of a ride-hailing app's trip booking screen: 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.

Why it matters

Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. On a ride-hailing app's trip booking screen, that means they can't tell how the page is organized.

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

Use real heading markup (h1–h6) and semantic emphasis (strong/em) instead of styling plain text to look structural.

Outcome

With the fix in place on a ride-hailing app's trip booking screen, they navigate the content in a sensible order.

Who is affected

Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.

Learn more

Understanding Understanding document (opens in a new tab)
Technique Related technique (opens in a new tab)