||Page must use semantic markup for lists: to identify the type of list container (ordered, unordered or description list) and to group its related list item elements.
- When list markup is used semantically, assistive technologies are able to convey information to users as they navigate to and within lists, such as the total number of items and the relative position of each item in the list.
- Assistive technologies also provide additional navigation commands for lists, such as "Go to next list item" and "Go to next list".
- Concision of list item content is important for accessibility, since assistive technologies read the entire content of each list item when users navigate through lists.
- When list markup is used in ways that violate the semantics of lists, it will be confusing to users of assistive technologies and diminish the accessibility of the page.
HTML4 Legacy Techniques
HTML5 and ARIA Techniques
|WCAG 2.0 Success Criteria
1.3.1 Info and Relationships (Level A, Primary Success Criterion)
- Ensure that list item content is concise.
- You can use ARIA labeling techniques to give a list container element a descriptive label.
ol as a container element for an ordered list of items.
ul as a container element for an unordered list of items.
li elements to identify items in ordered (
ol) and unordered (
dl as a container element for a description list (a.k.a. definition list) that contains contiguous groupings of terms and their associated descriptions or definitions.
dt elements to identify terms being described or defined in a description list (
dd elements to identify descriptions or definitions for a term in a description list (
- For repairing existing content that does not use list elements, you can use the ARIA
role attributes with value
[role="group"]to identify list container elements and [role="listitem"]
to identify list item elements.