- 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
A tester reviewing a project-management tool's task board finds this: CSS-generated content (::before counters, icons) conveying relationships not present in page code (DOM) text.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. On a project-management tool's task board, that means they can't navigate the content by its real structure.
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.
Outcome
With the fix in place on a project-management tool's task board, 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)
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