Testing lists

What to check when testing the accessibility of lists.

Correct markup

Inspect the code and make sure that any content visually presented as a list is programmatically exposed as a list. Check that:

• ordered and unordered lists are marked up either:
  • using the correct native HTML list elements (<ol>, <ul> and <li>), optionally interspersed with <script> or <template> elements, or
  • applying the ARIA list and listitem roles correctly to HTML elements like <div> or <span> that are allowed to be used for this purpose
• description lists are marked up with <dl>, <dt> and <dd>, optionally interspersed with:
  • <script> elements
  • <template> elements
  • <div> elements wrapping groups of <dt> and <dd> elements.

If a list has been given an accessible name

If the list has an accessible name provided via the aria-labelledby or aria-label attribute, make sure that:

• the aria-labelledby attribute references an existing element whose content is an appropriate name for the list
• the value of the aria-label attribute is an appropriate name for the list.

If a list has custom item markers

If you have changed your list item markers by using an image, different text or colours, make sure that the markers:

• meet contrast requirements
• are programmatically exposed and readable by assistive technologies if they provide meaning — for example, the position of an item in an ordered list.

Testing lists with a screen reader

See the steps for testing lists with screen readers on Windows, macOS, Android and iOS under the heading ‘Using lists’ in Foundations: lists — TetraLogical.