- Success Criterion 1.3.1
- Conformance level A
Single Item Wrongly Wrapped in List Markup
1.3.1 — Info and Relationships
Scenario
Setting
A crowdfunding platform's campaign page
What’s wrong
List markup wrapping non-list content (a lone logo, single paragraph) producing false "list, 1 item" announcements.
Example
<ul>
<li><img src="creator-logo.png" alt="Acme Studio logo"></li>
</ul>Why it matters
A screen reader user hears "list, 1 item" before the creator's logo, an odd announcement for something that isn't really a list.
How to test
Use a screen reader's list navigation: single/non-list content wrapped in ul/li falsely announces 'list, 1 item' — check that only genuine lists use list markup.
How to fix
List markup exists to group multiple related items; a single element never needs it.
<img src="creator-logo.png" alt="Acme Studio logo">Outcome
A visitor hears the creator's logo described plainly, with no odd list wrapper announced around it.
Who is affected
Screen reader users browsing the campaign page get an odd list announcement around a single, unrelated image.
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