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.

x-smallUsing special characters to create a list

Source Code

* milk
* bread
* butter
* flour

Implementation

* milk
* bread
* butter
* flour

However, when a screen reader user heard 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.

checkmark-smallUsing 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