Ordered lists should be used where the items have an inherent order, priority or sequence that needs to be communicated.
- Use lists to allow a user to quickly scan information that has been categorised (by alphabetical, numerical or chronological order for example).
- Do not display lists in a horizontal layout — they should always be vertically orientated.
- Do not use if the list requires labes — consider using the DescriptionList component instead.
Live example
Availabile platforms
Platform |
Available |
---|---|
Figma |
✓ |
Web (@ovotech/element) |
✓ |
App (@ovotech/element-native) |
✓ |
Properties
Ul
Name |
Values |
Default |
---|---|---|
showBulletsApply to Ul element to affect child Li's |
true false |
true |
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As a screen reader user, I want to be able to know the number of list items present, and the current position of the item that I am reading.
Test steps
Use these steps to check that the list component has been implemented correctly:
- Turn on a screen reader.
- Verify that when reading list content, that the number of list items and their position, is announced.