- Success Criterion 1.3.1
- Conformance level A
Responsive Table Layout That Strips Out Header Relationships
1.3.1 — Info and Relationships
Scenario
Setting
A video streaming service's show detail page
What’s wrong
Data tables flattened with role="presentation" (code that strips an element's meaning)/CSS display:block on responsive views, destroying header-cell relationships.
Example
A video streaming service's show detail page shows the problem clearly: data tables flattened with role="presentation" (code that strips an element's meaning)/CSS display:block on responsive views, destroying header-cell relationships.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. Here, on a video streaming service's show detail page, the result is they can't tell what's going on without extra effort.
How to test
Resize the browser to mobile width and inspect the (possibly CSS-flattened) table in DevTools: check header-cell relationships (th/scope or headers/id) survive the responsive layout.
How to fix
Keep table semantics in responsive views (or provide an equivalent accessible structure) so header–cell relationships survive.
Outcome
After the fix, the same visitor to a video streaming service's show detail page can now understand how the page is organized.
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