List - Web accessibility checklist

How to test a list

Gherkin Condensed

Given that I am on a page with a list

1 Keyboard for mobile & desktop

WHEN I use the arrow key to browse to a list I SEE the list comes into view
When when I use the tab key I SEE nothing happens to the list itself because lists must NOT be focusable

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow key to browse to a list
- I HEAR It identifies itself as a list
- I HEAR It declares the number of items in the list
When when I use the tab key I HEAR nothing happens to the list itself because lists must NOT be focusable

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to browse a list
- I HEAR It identifies itself as a list
- I HEAR It declares the number of items in the list

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Nothing, list items must not be focusable
Arrow-keys	Browses list items (when using screen reader)

2 Mobile screenreader gestures

When I use	I hear
Swipe	The screenreader reads the list content

3 Screenreader output for all devices

Reads	I hear
Role	It identifies itself as a list
Group	It declares the number of items in the list

Lists are not focusable with the tab key

When using a screen reader, the arrow keys are used to browse non-focusable content
The tab key only focuses interactive elements (ex: buttons, links or inputs) inside the list item.

Code examples

Unordered list

This semantic HTML contains all accessibility features by default.

<ul>
  <li>Charlie</li>
  <li>Romeo</li>
  <li>Juliet</li>
  <li>Mike</li>
  <li>Victor</li>
</ul>

NATO letters that are common first names

Charlie
Romeo
Juliet
Mike
Victor

Ordered list

<ol>
  <li>Alpha</li>
  <li>Bravo</li>
  <li>Charlie</li>
</ol>

The NATO alphabet

Alpha
Bravo
Charlie

When you can’t use semantic HTML

As a last resort, this custom list uses extra attributes if it’s not possible to edit the markup structure.

<!-- The NATO alphabet -->
<div role="list">
  <div role="listitem">Alpha</div>
  <div role="listitem">Bravo</div>
  <div role="listitem">Charlie</div>
</div>

Do not interrupt the list

The <ul> or <ol> list must only contain <li> list items.

<!-- Starcrossed NATO letters -->
<ul>
  <li>Romeo</li>
  <div>
    <a href="#">Buy tickets to Romeo and Juliet, The Experience</a>
  </div>
  <li>Juliet</li>
</ul>

Do not create fake lists

Adding returns or generic markup does not produce a list navigable by screen reader.

Charlie <br/>
Romeo <br/>
Juliet <br/>

<div>Alpha</div>
<div>Bravo</div>
<div>Charlie</div>