OpenA11y Evaluation Library

Use semantic markup for lists

Rule ID List 1
Conformance Required
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.
Conformance Required
WCAG Success Criteria

Success Criterion 1.3.1 Info and Relationships

Other Related Success Criterion:

Rule Category Color/Content
Rule Scope Page
First Step no
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
Information Links