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:

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.

4 Comments

Reply

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 Fagan. Reply

Michael, you have to encode HTML that you want to display: &lt;dl&gt;. 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.

Reply

Thank you for this, Adrian!

Reply

Thanks for this blog, DL needs to be discussed more.

I talked with a few blind screen reader users about a DL that I made on a website (semantically same as yours) and they were not happy with the situation (NVDA + Firefox combo).

Their argument:

Hearing list of all items instead of hearing some kind of hint that it is a key value pair(s) situation can be very dangerous for people that are not aware that it is a key and a value there.

And I agree. I would even say that linearizing DL to a UL type of pattern is not the optimal thing to do, especially for blind users that don’t understand that this is a key value list and not a “normal” list.

Let’s say we have a DL like this:

DL
DD abc /DD
DT cba /DT
DD def /DD
DT ghi /DT
/DL

We don’t know that abc is key and cba is value (to paraphrase).

If somebody don’t write “here are key value pairs” before this DL we don’t really know they are key values and may totally misunderstand the information.

I will not recommend using DL because of this. I know it can be totally fine. Some may even say it is less noisy. Fair. But when I will want to be inclusive for all situations I will just use a table with visually hidden table headings (key and value or some similar thing that makes sense).

To me this linearization of DL makes it non-inclusive (as we can’t really know that it’s not a “normal” list if we don’t see the screen or code that generated it).

Vod Nar; . Permalink

Leave a Comment or Response

  • The form doesn’t support Markdown.
  • This form allows limited HTML.
  • Allowed HTML elements are <a href>, <blockquote>, <code>, <del>, <em>, <ins>, <q>, <strong>, and maybe some others. WordPress is fickle and randomly blocks or allows some.
  • If you want to include HTML examples in your comment, then HTML encode them. E.g. <code>&lt;div&gt;</code> (you can copy and paste that chunk).