Nested list is not marked 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 nesting lists properly.

<ul> <li>Fruit <ul> <li>Strawberries</li> <li>Mangos</li> </ul> </li> <li>Vegetables <ul> <li>Tomatoes</li> <li>Cucumbers</li> </ul> </li> </ul>