• Success Criterion 1.3.1
  • Conformance level A

Meaningful Content Added Only Through CSS Generated Text

1.3.1 — Info and Relationships

Scenario

Setting

A project-management tool's task board

What’s wrong

CSS-generated content (::before counters, icons) conveying relationships not present in page code (DOM) text.

Example 

<style>.task.high-priority::before { content: "High priority: "; }</style>
<div class="task high-priority">Fix login bug</div>

Why it matters

A screen reader user hears only "Fix login bug" with no priority mentioned, since text added by ::before rarely enters the accessibility tree.

How to test

Turn off CSS and check whether the::before/::after generated content (icons, counters) that conveys real meaning is present as actual text. CSS content isn't read by all screen readers.

How to fix

CSS generated content is unreliable for meaning; put anything a user needs to know as real text in the page.

<div class="task high-priority"><span class="visually-hidden">High priority: </span>Fix login bug</div>

Outcome

Scanning the board, a team member hears which cards are high priority before opening any of them.

Who is affected

Screen reader users scanning the task board can't tell which cards are high priority at all.

Learn more

Related scenarios