- Success Criterion 1.3.1
- Conformance level A
- W3C reference F92
Presentation Role Wrongly Applied to a Real Table or List
1.3.1 — Info and Relationships
Scenario
Setting
A subscription box service's account settings
What’s wrong
role="presentation" (code that strips an element's meaning) is put on real content (an actual table or list), stripping its structure — screen readers lose the table/list entirely.
Example
Watch a subscription box service's account settings closely and you'll spot this: role="presentation" (code that strips an element's meaning) is put on real content (an actual table or list), stripping its structure — screen readers lose the table/list entirely.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. In this case (a subscription box service's account settings), they lose track of what belongs to what.
How to test
Search the DOM for role="presentation" or role="none": if applied to an actual data table or list, screen reader users lose all structure — check what the element actually is.
How to fix
Remove role="presentation" (code that strips an element's meaning) from real tables/lists — keep semantics on content that has meaning.
Outcome
Once corrected, a subscription box service's account settings lets them 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