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   or .

There are three main types of lists in HTML:

Unordered list (<ul>): This list is depicted as a bulleted list of items (each labeled with <li>).
Ordered list (<ol>): This list is depicted as a numbered list of items (each labeled with <li>).
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:

<ul>

<li>apples</li>

<li>sugar</li>

<li>cinammon</li>

<li>pie crust</li>

<li>cornstarch</li>

</ul>

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:

apples 
sugar 
cinnamon 
pie crust 
cornstarch 