Enable

Description List (neé Definition List)

Description lists used to be called definition lists. They used to be used when defining a list of related items (e.g. like the list of movie monsters below). In the HTML5 era, its semantic definition is a lot more broad and is now used to give descriptions to a list of related items.

A HTML Description List

Definition lists are just name/value pairs, marked up with the <dt> and <dd tags, respectively. Note that, unlike the ARIA version, there is no group tag around the name value pairs.

This is the best solution to use, especially when building from scratch.
Gojira:
A japanese kaiju monster created in the 1960s.
Frankenstein:
A fictional doctor that created a fictional being out of the spare parts of dead people.
8-man:
A manga featuring a robot whose brain is filled of the memories of a cop gunned down in action. Predates Robocop by at least 20 years.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Aria Roles example

If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.

This is the ARIA equivalent of the definition list. While I do like the semantic addition of the listitem role to group the name/value pairs, it is still best to use the native HTML5 definition lists.

Gojira:
A japanese kaiju monster created in the 1960s.
Frankenstein:
A fictional doctor that created a fictional being out of the spare parts of dead people.
8-man:
A manga featuring a robot whose brain is filled of the memories of a cop gunned down in action. Predates Robocop by at least 20 years.

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞