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. 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 who created a fictional being out of the spare parts of dead people.
- 8-man:
- A manga featuring a robot whose brain is filled with the memories of a cop gunned down in action. Predates Robocop by at least 20 years.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.
Aria Roles example
If you are already using a component similar to this in existing work that is not accessible, go to the developer walkthrough in this section to see how 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.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.