Skip to main content

Lists

Use a list when you have two or more  items of the same type such as steps in a process, menu items, or taxonomy terms. 

Must haves

  1. Use list markup (<ul> for unordered lists, <ol> for ordered lists)
  2. Use lists for groups of menu/navigation links and enclose the list in a <nav>.

Learn more about the accessibility of lists and other page structure

Do and Don't

DoDon't
<p>In our updated interface you can accomplish many things, including:</p> 
<ul> 
   <li>Look up recent transactions</li> 
   <li>Pay invoices</li> 
   <li>Send payment reminders</li> 
</ul>

<div>In our updated interface you can accomplish many things, including:</div> 
<div class="list"> 
   <div class="listitem">Look up recent transactions</div> 
   <div class="listitem">Pay invoices</div> 
   <div class="listitem">Send payment reminders</div> 
</div>

Here the list structure will not be detectable by screen readers and will not be communicated to users.

Last modified