- 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
<div class="heading">Shipping Address</div>Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
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
Put meaningful content in the DOM as real text — keep CSS-generated content decorative.
<h2>Shipping Address</h2>A real heading element exposes the section structure to assistive tech; a styled div doesn't.
Outcome
On a project-management tool's task board, this barrier is gone for screen-reader, braille — they reach the same outcome without extra effort.
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)
Related scenarios
- Text Styled to Look Like a Heading Instead of Coded as One
- Text Columns Faked With Spaces Instead of Real Table Markup
- Table Layout Faked With Spaces Instead of Real Table Code
- Clickable Div Acting as a Link Button With No Real Role
- Structural HTML Tags Used Purely for Visual Styling
- Layout-Only Table Wrongly Coded With Real Header Cells