- Success Criterion 1.3.1
- Conformance level A
- W3C reference F48
Tabular Data Placed Inside a Preformatted Text Block
1.3.1 — Info and Relationships
Scenario
Setting
An online clothing store's product listing page
What’s wrong
Tabular data is shown inside a <pre> block (fixed-width text) instead of a real table — no headers or cell navigation for screen readers.
Example
Consider an online clothing store's product listing page: tabular data is shown inside a <pre> block (fixed-width text) instead of a real table — no headers or cell navigation for screen readers.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. On an online clothing store's product listing page, that means they can't navigate the content by its real structure.
How to test
Inspect any pre block holding column-aligned data: if it's meant to be a table, a screen reader reads it as one run-on line with no cell/header navigation.
How to fix
Use a real table element with headers instead of a pre block.
Outcome
With the fix in place on an online clothing store's product listing page, 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)
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