The ARIAlistitem role can be used to identify an item inside a list of items. It is normally used in conjunction with thelist 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>

Description

Any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using thelist andlistitem containers respectively.

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.

Associated WAI-ARIA Roles, States, and Properties

list

A list of items. Elements with rolelist must have one or more elements with the rolelistitem as children, a one or more elements with the role ofgroup that have one or more elements with thelistitem role as children.

group

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.

Best practices

Only userole="list" androle="listitem" if you have to — for example if you don't have control over your HTML but are able to improve accessibility dynamically after the fact with JavaScript.

If at all possible, you should use the appropriate semantic HTML elements to mark up a list and listitems —<ol>,<ul> and<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>

Specifications

See also

• HTML<li> element
• HTML<ul> element
• HTML<ol> element
• ARIA:list role
• ARIA:group role
• Accessibility Object Model
• ARIA in HTML
• ARIA Lists examples — by Scott O'Hara