Lists
Semantic lists help screen readers understand the type of the element and the number of items in the element, and provide easier navigation via list commands specific to screen readers.
Semantic list using HTML​
HTML provides tags that express lists. Most likely you are already familiar with the ul (unordered list) and ol (ordered list) tags.
In the example below, the list is correctly announced by screen readers as a list with three items.
- Turn on VoiceOver with
Cmd+F5. - Press
Ctrl+Opt+Cmd+hrepeatedly until you have jumped to the Editor Output heading. - Press
Ctrl+Opt+Right Arrow.
VoiceOver will announce ‘List 3 items’.
- Eggs
- Milk
- Bread
Semantic list using ARIA roles​
The list below uses ARIA roles to express the semantics of a list from a generic div structure. This approach to expressing list structure can be used if it is not possible to use the native HTML list tags.
Notice that the default list styling is not applied. That is because the browser’s default stylesheet targets ul and ol tags.
In the example below, the list is correctly announced by screen readers as a list with three items.
Exercise: Unsemantic list​
Update the example below so that the items are expressed as a list. The easiest way to make this semantic is to use a list tag. If that is not possible, wrap the elements in a container and give it a role of list. The individual items will need to be identified with a role of listitem.