Use Appropriate Semantic Markup for Lists

Lists are a useful way to organize information. When screen readers come to a properly marked up list, they will notify the user that there is a list and how many items are in it. This is an excellent way to provide orienting information to users. It is very important to mark the list as a real list with correct HTML mark up, rather than creating a fake list (with only visual styling) using elements such as <br> or <p>.

There are three main types of lists in HTML:

  1. Unordered list (<ul>): This list is depicted as a bulleted list of items (each labeled with <li>).
  2. Ordered list (<ol>): This list is depicted as a numbered list of items (each labeled with <li>).
  3. Definition list (or Description list in HTML5) (<dl>): This list is depicted as pairs of terms (<dt>) and descriptions (<dd>).

Here is an example of a correctly marked up unordered list:

Apple Pie Shopping List:





<li>pie crust</li>



Here is the same list, but this time it's a "fake" list. It has been styled to look like a list using the break element. However, when a screen reader comes up to it, it will not announce that it's a list and will not announce how many items are in it. In a short list like this one, it's probably not a big deal. But imagine the hassle of coming upon a very long list and not knowing what to expect as you access it with a screen reader.

Apple Pie Shopping List:

pie crust<br>