6.7 Mark up lists correctly

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

Details

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

Examples

• Bread
• Apple
• Milk

Tips

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