Description list

So the description list also known as definition list is not supported by screenreaders as I hoped for. What screenreaders say, what they should say and is there an alternative until screenreaders support the dl-, dt- and dd-element correctly?

What screenreaders say

Code example

  <dl>
    <dt>Term 1</dt>
    <dd>Description or value 1a</dd>
    <dd>Description or value 1b</dd>
    <dt>Term 2</dt>
    <dd>Description or value 2</dd>
  </dl>

Example

Term 1

Description or value 1a

Description or value 1b

Term 2

Description or value 2

What would your screenreader do?

NVDA announces: "List with 5 items" while some other screenreader say these are 2 item. Then reading the items, there is no screenreader that connects the content in the dt-element with the content of the dd-elements. I expected at "Term 1" something like "One term with two definitions" followed by the definitions.

An accessible alternative?

Before reading on I would like to mention that I did not yet looked for any filed issues in any browser/screenreader resource. Don't blame me for that, I am still figuring out what should actually happen and what is already known about all this. So keep that in mind when you read on.

  <dl>
    <dt role="term" id="term1">Term 1</dt>
    <dd role="definition" aria-labelledby="term1">Description 1a</dd>
    <dd role="definition" aria-labelledby="term1">Description or value 1b</dd>
    <dt role="term" id="term2">Term 2</dt>
    <dd role="definition" aria-labelledby="term2">Description or value 2</dd>
  </dl>

The used WAI-ARIA roles don't seem quit right as current specs say dl stands for description list, while I use role=definition.

This is yet to test with different screenreaders

Test results might be available once.

TODO: study this

• MDN Web Docs
• Using the aria-labelledby attribute
• W3C ARIA issues: Create definition list role
• Definition Lists versus Tables

Tips

• Keep semantics for it might be supported one day.
• Don't overdo WAI-ARIA

Update March 2018