| Rule ID |
List 1 |
| Definition |
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. |
| Purpose |
- 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.
|
| Required |
Yes for HTML5 and ARIA Techniques ruleset mapping |
| WCAG Success Criteria |
1.3.1 Info and Relationships (Level A, Primary Success Criterion)
Other Related Success Criterion:
|
| Rule Category |
Styling/Content |
| Scope |
Page |
| Target Resources |
ul, ol, li, dl, dt and dd elements, [role="list"], [role="group"] and [role="listitem"]
|
| Techniques |
- Ensure that list item content is concise.
- You can use ARIA labeling techniques to give a list container element a descriptive label.
- Use
ol as a container element for an ordered list of items.
- Use
ul as a container element for an unordered list of items.
- Use
li elements to identify items in ordered (ol) and unordered (ul) lists.
- Use
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.
- Use
dt elements to identify terms being described or defined in a description list (dl).
- Use
dd elements to identify descriptions or definitions for a term in a description list (dl).
- For repairing existing content that does not use list elements, you can use the ARIA
role attributes with value [role="list"] or [role="group"]to identify list container elements and [role="listitem"] to identify list item elements.
|
| Informational Links |
|