listitem role can be used to identify an item inside a list of items. It is normally used in conjunction with the
list role, which is used to identify a list container.
<section role="list"> <div role="listitem">List item 1</div> <div role="listitem">List item 2</div> <div role="listitem">List item 3</div> </section>
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.
There are no hard and fast rules about which elements you should use to markup 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.
Associated WAI-ARIA Roles, States, and Properties
A list of items. Elements with role
listmust have one or more elements with the role
listitemas children, a one or more elements with the role of
groupthat have one or more elements with the
listitemrole as children.
A collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
ARIA Lists — some useful examples and thoughts by Scott O'Hara
<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 list/listitem roles don't distinguish between ordered and unordered lists.
Note: If you are marking up a list of items that will function as a tabbed interface, you should instead use the
|Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'listitem' in that specification.
Screen reader support