8.3. Mark up description lists with <dl>, <dt> and <dd>
Use <dl>, <dt> and <dd> tags to mark up description lists.
A description list is a series of key/value pairs that might be found, for example, in a product description, or in a glossary of terms.
Note
One keyword (<dt> tag) might have several values (<dd> tags).
Example with the description of an event:
<h2>Web Accessibility Conference</h2> <dl> <dt>Location</dt> <dd>Paris</dd> <dt>Dates</dt> <dd>Saturday, September 7</dd> <dd>Wednesday, October 14</dd> <dt>Time</dt> <dd>Starts at 10 a.m.</dd> </dl>
Example with a glossary:
<dl> <dt><dfn>ARIA</dfn></dt> <dd>Accessible Rich Internet Application</dd> […] <dt><dfn>WCAG</dfn></dt> <dd>Web Content Accessibility Guidelines</dd> […] </dl>
What are the advantages?
Structuring lists is essential for people using a screen reader (blind or visually impaired). When they come across a structured list, they are able to:
- Navigate from list to list within a page.
- Know from the start the number of elements in the list.
- Navigate more easily through the list:
- Go directly to the end of the list if they are not interested in the content.
- Easily return to the top of the list.