• Success Criterion 1.3.2
  • Conformance level A

Visible Page Text Completely Skipped by the Screen Reader

1.3.2 — Meaningful Sequence

Scenario

Setting

A subscription box service's account settings

What’s wrong

Visible text content is skipped entirely by the screen reader (missing from the accessibility tree) — sighted users see information that assistive technology users never encounter at all.

Example 

<style>
.plan-badge::after { content: "Premium Plan"; }
</style>
<p>Your current plan: <span class="plan-badge"></span></p>

Why it matters

Sighted users see "Your current plan: Premium Plan," but because the plan name only exists as CSS generated content, most screen readers announce nothing after the colon.

How to test

Read the full page with a screen reader: if visible text you can see on screen is never announced at all, check whether it's excluded from the accessibility tree (e.g., aria-hidden or CSS visibility tricks).

How to fix

Put real, meaningful text in the HTML itself; reserve CSS generated content for purely decorative marks.

<p>Your current plan: <span class="plan-badge">Premium Plan</span></p>

Outcome

Read in full now, "Your current plan: Premium Plan" tells the screen reader user everything they need.

Who is affected

Screen reader users get no indication of their subscription tier because CSS-generated text is not reliably exposed to assistive technology.

Learn more

Related scenarios