Lists

Creating Accessible Lists

It is important to use list elements when denoting a list of items. When sighted users view a set of items like the following, it is easily to visually discern that the relationship that exists between the items.

Use list elements to create a list

Source Code

<ul>
  <li>milk</li>
  <li>bread</li>
  <li>butter</li>
  <li>flour</li>
</ul>

Implementation

milk
bread
butter
flour

Do not use special characters to create a list

Source Code

* milk
* bread
* butter
* flour

Implementation

* milk
* bread
* butter
* flour

When a screen reader user hears this, they will hear “star milk, star bread, star butter, star flour.” To explicitly define the relationship these items have to one another, use the <ul>, <ol>, and <li> elements.