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.


NATO letters that are common first names

  • Charlie
  • Romeo
  • Juliet
  • Mike
  • Victor

Ordered list


The NATO alphabet

  1. Alpha
  2. Bravo
  3. 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>

Do not interrupt the list

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

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

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/>