- Success Criterion 1.3.1
- Conformance level A
List Items Placed Outside Their Parent List Element
1.3.1 — Info and Relationships
Scenario
Setting
An online spreadsheet's toolbar
What’s wrong
Malformed list structure: list items (li) outside list code (ul/ol), or lists containing non-li children, breaking item enumeration.
Example
An online spreadsheet's toolbar is a good example: malformed list structure: list items (li) outside list code (ul/ol), or lists containing non-li children, breaking item enumeration.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. On an online spreadsheet's toolbar, that means they can't navigate the content by its real structure.
How to test
Inspect a list in DevTools: li elements must be direct children of ul/ol, and only li belongs inside — other tags or wrong nesting break item announcement.
How to fix
Nest list items (li) directly inside list code (ul/ol) and keep non-item elements out of the list.
Outcome
With the fix in place on an online spreadsheet's toolbar, 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