Skip to main content

Lists

Lists help readers quickly scan content, follow steps, and identify key points. They also improve accessibility: screen readers can announce lists and item counts, enabling more efficient navigation for users of assistive technology. To preserve structure and meaning, use proper list formatting rather than manual workarounds.

Why accessible lists matter

Accessible lists support:

  • Clear structure: Readers can tell what is grouped together.
  • Better navigation: Screen reader users can jump between list items.
  • Consistent meaning: The content keeps its purpose even if styles change.
  • Understanding for everyone: Lists reduce long blocks of text and improve readability.

Code Examples

The simplest lists are constructed with the ul (unordered) or ol (ordered) list elements:

Unordered List

Unordered, or bulleted, lists are the simplest version. The JAWS Screen reader will announce "List of 3 items" when focusing on the list, then for each will announce "Bullet, item 1".

  • Item 1
  • Item 2
  • Item 3
<ul> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul>

Ordered List

Ordered lists denote an order to the content, like steps in a proces. The JAWS Screen reader will announce "List of 3 items" when focusing on the list, then for each will announce "1, item 1", then "2, item 2", etc.

  1. Item 1
  2. Item 2
  3. Item 3
<ol> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ol>

For ordered lists, there is also the start attribute, which is respected by screen readers. If you need a list to start at 5, for example, you can add this code

<ol start="5">

Additional Techniques

  • Styling Lists: Using CSS, you can not only visually style lists, but have this information presented to screen readers.
  • ARIA Lists: Create lists using ARIA.
  • Definition Lists: A special type of lists that lack full screen reader support.
Last modified