List or list item is not marked up properly

Rule

Lists MUST be constructed using the appropriate semantic markup.

Background

People who can see are able to look at a list and get a sense that it is a list, how large it is, and its structure - whether there are multiple lists, nested lists, etc. People who are blind do not have this ability if the list is not marked with semantic list markup. Lists must be marked semantically in a way that correctly identifies the list structure and type: unordered, ordered, or definition/description. When list markup is correctly applied, screen readers are able to notify users when they come to a list and tell them how many items are in a list.

How to Fix

Fix this issue by correctly applying <ul>/<li> or <ol>/<li> markup.

1. Unordered list: Wrap a series of list items (<li>) inside an unordered list element (<ul>). Unordered lists should be used when a set of items can be placed in any order.

<ul> <li>Strawberries</li> <li>Papaya</li> <li>Mangos</li> <li>Kiwis</li> … </ul>

2. Ordered list: Wrap a series of list items (<li>) inside an ordered list element (<ol>). Ordered lists should be used when the list items need to be placed in a specific order.

<h3>How to boil an egg</h3> <ol> <li>Place eggs in a large saucepan.</li> <li>Cover them with cool water by 1 inch.</li> <li>Cover pan with a lid and bring water to a rolling boil over high heat.</li> <li>When the water has reached a boil, remove saucepan from the burner.</li> <li>Let eggs sit in water for 12 minutes.</li> </ol>