Lists add structure to our content for sighted users. When implemented correctly, lists can do the same for screen reader users. Users will hear that it's a list of related items, how many items there are, and which one they are currently on.

WCAG 1.3.1: Info and Relationships Opens in a new window


  • All lists are implemented using list tags.
  • Content that is not a list does not use list tags for styling. When required, role="presentation" is used to remove the list role.
  • All direct children of <ul>'s and <ol>'s are <li>'s.


  • Bread
  • Apple
  • Milk


  • CSS can be used to alter the appearance of the native bullets.