Updated Brief Note on Description List Support
TL;DR: Description list support continues to be generally good (with VoiceOver still the outlier), even if you may not like how it is supported.
For background, the <dl>
has existed since HTML+, or 1993, when it was called definition list. In December 2022 I wrote Brief Note on Description List Support with convoluted tables to show how an HTML <dl>
performed with screen readers. I included ARIA roles for comparison (and expanded on a 2020 post).
That 2022 post is out of date. The associationlist
, associationlistitemkey
, and associationlistitemvalue
roles never made it out of draft. The term
and definition
roles confuse some devs given the existence of <dfn>
.
When I went to re-test, I found support for those abandoned roles was all over the map now and decided it wasn’t worth reporting. You shouldn’t have had those roles in production anyway.
Test Content
The original post was meant to compare the roles with the native element. I’m not re-using its test page because I only care about the HTML version of the list, which I have pasted here:
- farrago
- a confused mixture; hodgepodge
- louche
- not reputable or decent
- parse
- to examine in a minute way; analyze critically
- argot
- the language used by a particular type or group of people; an often more or less secret vocabulary and idiom peculiar to a particular group
Test Results
Again, this is only reporting on the <dl>
, <dt>
, and <dd>
. I include the screen reader commands I used so you can test it on your own (when this post is out of date in 6 weeks or so). The results are presented in description lists.
Key
I made a key that corresponds to my last post about description list support if you want to compare:
- Yup: my ideal implementation;
- Sure: this implementation is good enough;
- Wut: conveys the critical bits at least;
- Nope: broken (no or incorrect information conveyed).
Firefox 133 / NVDA 2024.4.1
- Read-all (NVDA + A)
- Yup.
- Announces as a list with 8 items.
- Announces each DT and DD with a pause.
- Virtual cursor (↓)
- Yup.
- Announces as a list with 8 items.
- Arrow key stops at each DT and DD.
- List navigation (L)
- Yup.
- Announces as a list with 8 items.
- List item navigation (I)
- Sure.
- Announces as a list with 8 items.
- Only navigates DTs.
Chrome 131 / JAWS 2025.2412.50
- Read-all (JAWS + ↓)
- Sure.
- Announces as a definition list with 4 items.
- Announces each DT and DD together.
- Virtual cursor (↓)
- Sure.
- Announces as a definition list with 4 items.
- Arrow key stops at each DT and DD.
- List navigation (L)
- Sure.
- Announces as a definition list with 4 items.
- List item navigation (I)
- Sure.
- Only navigates DTs.
Edge 131 / Narrator / Win11 24H2
- Read-all (Narrator + R)
- Wut.
- Does not announce presence of list.
- Announces each DT and DD with a pause.
- Virtual cursor (↓)
- Wut.
- Does not announce presence of list.
- Arrow key stops at each DT and DD.
- List navigation (L)
- Wut.
- Announces as list of zero items.
Safari 18.2 / VoiceOver / macOS 15.2
- Read-all (VO + A)
- Sure.
- Announces as a definition list with 4 items.
- Announces each DT and DD with a pause.
- Virtual cursor (↓)
- Nope.
- Does not announce list.
- Arrow key stops at each DT and DD.
- Each DT and DD announces as “a selectable text”.
- List navigation (VO + X)
- Sure.
- Announces as a description list with 4 items.
Chrome 131 / TalkBack 15.1 / Android 15
- Read-all (swipe L, “Read from focused item”)
- Sure.
- Does not announce list.
- Announces DD with trailing “definition”.
- Announces DT with trailing “term”.
- Virtual cursor (swipe right)
- Sure.
- Does not announce list.
- Announces DD with trailing “definition”.
- Announces DT with trailing “term”.
- List navigation (Alt + O)
- Sure.
- Announces as list, no count.
- List item navigation (Alt + I)
- Sure.
- Only navigates DTs.
- Announces DT with trailing “term”.
Safari 18.2 / VoiceOver / iPadOS 18.2
- Read-all (two finger swipe down)
- Sure.
- Announces as description list, no count.
- Announces description list start and end.
- Announces DT with trailing “term”.
- Announces DD with trailing “description”.
- Virtual cursor (swipe right)
- Sure.
- Announces description list start and end.
- Announces DT with trailing “term”.
- Announces DD with trailing “description”.
- List navigation (X)
- Nope.
- Announces “List not found”.
Wrap-up
Description list support continues to be generally good (with VoiceOver still the outlier), even if you may not like how it is supported.
Related
- HTML 5, § 4.4.9 The
dl
element - HTML 5, § 4.4.10 The
dt
element - HTML 5, § 4.4.11 The
dd
element - HTML Accessibility API Mappings Editor’s Draft, § 3.4 HTML Element Role Mappings for
<dl>
(list
role) - HTML Accessibility API Mappings Editor’s Draft, § 3.4 HTML Element Role Mappings for
<dt>
(term
role, same as<dfn>
) - HTML Accessibility API Mappings Editor’s Draft, § 3.4 HTML Element Role Mappings for
<dd>
(definition
role) - Accessible Rich Internet Applications Editor’s Draft,
list
role - Accessible Rich Internet Applications Editor’s Draft,
term
role - Accessible Rich Internet Applications Editor’s Draft,
definition
role - ARIA in HTML Editor’s Draft,
<dl>
(no implicit corresponding ARIA role) - ARIA in HTML Editor’s Draft,
<dt>
(no implicit corresponding ARIA role) - ARIA in HTML Editor’s Draft,
<dd>
(no implicit corresponding ARIA role) - Accessibility Support, dl element (description list) (html)
- MDN, <dl>: The Description List element
- NVDA issue, #3858 Definition lists not exposed correctly, February 2014
- JAWS issue, #157 Support for Definition/Description Lists, December 2018
- Jules Ernst, Description list, March 2018
- Me, VoiceOver on iOS 14 Supports Description Lists, September 2020
- Me, Brief Note on Description List Support, December 2022
- Tim White, testing with JAWS and VoiceOver, March 2024
- David Luhr, The underrated <dl> element, December 2024
2 Comments
Thanks for sharing. I’m curious whether you’ve tested anything where multiple s or multiple s in a row were used.
In my experience s are rarely used. Once upon a time when I built a tool that converted web pages with definition lists to quizzes I found very few examples I could use and in many cases just had to make my own ones https://web.archive.org/web/20100225142735/http://quizify.com/
In response to .Michael, you have to encode HTML that you want to display:
<dl>
. Or just say DL (the caps is a good clue to me).I don’t know if you meant
<dt>
s and<dd>
s, but if so then yes. They perform within what I laid out above. You can confirm that by running your own tests against my results, which are marked up as description lists.
Leave a Comment or Response