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.

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top