How to build an accessible List in React
Renders native <ul>/<ol> with <li> children so assistive tech announces the list and its length; marker="none" hides bullets visually without removing list semantics
When to use a List
- Presenting a set of related items as a bulleted or numbered list
- Conveying sequence with an ordered list (as="ol")
- Keeping list semantics while hiding visual markers (marker="none")
When not to use it
- Tabular data with multiple columns — use DataTable
- Interactive navigation items — use SideNav or a menu
Accessibility
Role list, verified at WCAG 2.2-AA.
Common mistakes
Avoid: A stack of <Text> rows used as a visual list
Prefer: <List><ListItem>…</ListItem></List>
Real list markup lets screen readers announce item count and position
Example
<List><ListItem>Tokens</ListItem><ListItem>Themes</ListItem></List>