Skip to main content

ARIA Lists

While the best practice is to always use native HTML elements first, sometimes you will need to build lists using elements that aren't the standard HTML list tags. This might happen when:

  • A design framework or third-party tool generates non-standard markup
  • CSS styling removes the list's default appearance and behavior
  • You are working with existing code that cannot easily be changed

ARIA (Accessible Rich Internet Applications) roles help solve this problem by telling assistive technology that a group of items should be treated as a list.

Code Examples

Standard tags like <ul>, <ol>, and <li> already have built-in accessibility and screen readers automatically announce them as lists and tell users how many items are included. When using ARIA to create a list, there are two roles and both are required which will make these elements function the same as an unordered list:

• role="list": identifies a container as a list
• role="listitem": identifies each item within that list

Note that the bullet needs to be inserted using CSS or other techniques as the ARIA list will not change the presentation. A sample ARIA based list might look like this:

<div role="list">
  <div role="listitem">&bull; role="list": identifies a container as a list</div>
  <div role="listitem">&bull; role="listitem": identifies each item within that list</div>
</div>
Last modified