WebAIR

Do you use the appropriate markup to present lists? (TXT04)

Why is this important?

Related items of text can be grouped together into lists. Lists may be ordered (e.g. 1., 2., 3.) or unordered (e.g. Eggs, Milk, Flour). Lists of items that each include a definition are called Definition Lists. Using the appropriate markup will allow people with disabilities, particularly those using a screen reader, to interpret and navigate the webpage properly. For example, when a screen reader comes across a list, it will announce how many items are in the list and where the user is in the list. Using the appropriate markup to present lists also makes it easier to define the apperance of a webpage. Lists are often used to group the links in a navigation bar together.

How to fix the problem

Using the appropriate markup to present lists will make it easier for people with disabilities to interpret the data. Ordered lists should be marked up with the <ol> element, with individual list items marked up with the <li> element. Unordered lists should be marked up with the <ul> element, with individual list items marked up with the <li> element. Definition lists should be marked up with the <dl> element, with the term marked up with the <dt> element and the definition marked up with the <dd> element.

Example

//An ordered list
<ol>
<li>Mix eggs and milk in a bowl.</li>
<li>Add salt and pepper.</li>
</ol>
//An unordered list
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ul>
//A definition list
<dl>
<dt>Flour</dt>
<dd>A powder obtained by grinding grain, typically wheat, and used to make bread, cakes, and pastry.
</dd>
</dl>

Further Information

  1. http://docs.webplatform.org/wiki/guides/html_lists