Unordered, ordered and definition lists
Impact: Moderate to high
Users mainly impacted: Blind, severely visually impaired, motor handicapped, cognitive disability.
RGAA criteria: Criterion 9.3 [A]
Explanation
Structuring content with the right elements provides an enhanced navigation experience for screen reader users.
A blind, visually impaired or reading impaired user who uses a screen reader to browse the content of a page will use keyboard shortcuts to navigate between item types. It can navigate from title to title, go to the next form field, or go to the previous list.
In addition to allowing you to navigate between elements, it also allows you to avoid them.
In the case of a list, the number of items in the list is announced, as well as the level of the item in the list. Thus, if the user finds the list too long, he or she can simply avoid it rather than go through it in its entirety, or go to the beginning of the list, or to the end directly.
Three types of lists are identified
- unordered lists
- The lists use the
ul
andli
tags - The lists use the ARIA roles
list
andlistitem
.
- The lists use the
- ordered lists
- The lists use the
ol
andli
tags - The lists use the ARIA roles
list
andlistitem
.
- The lists use the
- definition lists
- The lists use the
dl
anddt
/dd
tags
- The lists use the
A menu with a large tree structure should use the nested lists to better prioritize the elements by levels and allow the user to navigate more easily.
It is notalways necessary to list a succession of elements, reading a list in a technical assistance can be very verbose. For example, with a breadcrumb trail, this sequence of pages does not necessarily have to be listed.
See the breadcrumb of this page.