Description list not marked up properly

Link to Description list not marked up properly copied to clipboard



Lists MUST be constructed using the appropriate semantic markup.


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 using the description list element (<dl>), to wrap one or more terms (<dt>) and associated description(s) (<dd>).

<dl> <dt>presentation</dt> <dd>rendering of the content in a form to be perceived by users</dd> <dt>relationships</dt> <dd>meaningful associations between distinct pieces of content</dd> </dl>