list role can be used to identify a list of items. It is normally used in conjunction with the
listitem role, which is used to identify a list item contained inside the list.
<div role="list"> <div role="listitem">List item 1</div> <div role="listitem">List item 2</div> <div role="listitem">List item 3</div> </div>
Any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the
listitem containers respectively. A
list must have one or more
listitem children, or, alternatively, have one or more
groups as children, with each
group having one or more
listitems as children.
There are no hard and fast rules about which elements you should use to mark up the list and list items, but you should make sure that the list items make sense in the context of a list, e.g. a shopping list, recipe steps, driving directions.
A single item in a list or directory. Elements with role listitem can only be found in an element with the role
A collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a page's table of contents.
Unlike the HTML
<ul>, the ARIA
list roles doesn't distinguish between ordered and unordered lists. If at all possible, you should use the appropriate semantic HTML elements to mark up a list (
<ul>) and list items (
<li>). For example, our above example should be rewritten as follows:
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
or use an ordered list if the order of the list items matters:
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>
Note: The ARIA
listitem roles don't distinguish between ordered and unordered lists.
As an aside, note that if you are using the semantic HTML elements of
<ul> and apply a role of
presentation, each child
<li> element inherits the
presentation role because ARIA requires the
listitem elements to have the parent
list element. So, the
<li> elements are not exposed to assistive technologies, but elements contained inside of those
<li> elements, including nested lists, are visible to assistive technologies.
|Accessible Rich Internet Applications (WAI-ARIA) |