SC 1.3.1 Info and Relationships and description list

[sarasuri]

Hello.

Our Web Accessibility Testing team has identified an issue while testing a web page. We are evaluating whether using a "Description List" for the text "This claim is for: Bob" is semantically correct.
Currently, this text is marked up with a description list. However, some team members believe that the "<p>" element might be more appropriate, while others feel that the description list is suitable.

<h2 class="mrgn-tp-0">Claim details</h2>
    <dl class="dl-horizontal brdr-0">
  <dt>This claim is for:</dt>
  <dd>John</dd>
</dl>

We would appreciate any feedback on whether the description list is the correct semantic approach or if a different approach should be considered.

Thank you

[stevefaulkner]

My suggestion: if it is a one item definition list, get rid of it 

<h2 class="mrgn-tp-0">Claim details</h2>
    
 <p>This claim is for: John</p>

[sarasuri]

@stevefaulkner Thank you for the quick response.
The list actually has two items.

<dl class="dl-horizontal brdr-0">
  <dt>This claim is for:</dt>
  <dd>John</dd><dt>Claim number:</dt>
  <dd>1234-AA-90</dd></dl>

[patrickhlauke]

There's no definitive right or wrong here. Just a sequence of <p>s works just fine. Or a <dl>. Or a simple two-column <table>...

Just on the <dl> aspect, note that currently (in most browser/AT combos) description lists are announced in a slightly awkward/confusing way - the don't announce specifically that they're a description list, nor do they make a distinction between what's the <dt> and what's the <dd> (the above example announces as "a list with 4 items" or similar in some cases)

[stevefaulkner]

Just on the <dl> aspect, note that currently (in most browser/AT combos) description lists are announced in a slightly awkward/confusing way - the don't announce specifically that they're a description list, nor do they make a distinction between what's the <dt> and what's the <dd> (the above example announces as "a list with 4 items" or similar in some cases)

for 2 items I suggest either of the following is appropriate and would use them before <dl>, due to the quirks @patrickhlauke described

<h2 class="mrgn-tp-0">Claim details</h2>   
<p>This claim is for: John</p>
<p>Claim number: 1234-AA-90</p>

or

<h2 class="mrgn-tp-0">Claim details</h2>
<ul>    
<li>This claim is for: John</li>
<li>Claim number: 1234-AA-90</li>
</ul>

[sarasuri]

Thank you for the responses.

We have encountered similar issues with screen readers concerning description lists, as noted by @patrickhlauke. Our understanding is that using appropriate markup to provide content semantically is essential for meeting accessibility standards.

There are instances we have description lists with 5 more items. In such cases, how should we balance using semantic markup with ensuring accessibility?

If a specific type of markup is not well-supported by screen readers, should we consider alternative methods for presenting the content, even if the semantic markup is technically appropriate for the content type?

[scottaohara]

using semantic markup is important. realizing that not all semantic markup is actually exposed in browsers a11y trees, or that some markup patterns have better usability than others is even more important.

[TestPartners]

If you have that many <dd> elements for each <dt>, it sounds like you should probably be using a data table.

Sometimes, description lists are easily understandable with a screen reader, in which case we leave them. But other times they are incomprehensible, in which case we say they are not accessibility supported and that it is necessary to use different semantics, usually a data table.

I know this is inconsistent and subjective, but it's the best we can do. It would be worse to say that description lists are always ok or that they are always not ok.

[sarasuri]

Thank you all for your feedback

I know this is inconsistent and subjective, but it's the best we can do. It would be worse to say that description lists are always ok or that they are always not ok.

@TestPartners Agreed. It is not consistent and can be subjective.
We have a description list with 5 <dt> elements, each is with a <dd> element.
During testing, we determined that a description list is suitable for this content since only one record will be displayed at a time.
In this scenario, would it be more appropriate to use a data table instead of a description list?
For example.

[JAWS-test]

Please note that dl does not currently work at all in Chrome and Edge: FreedomScientific/standards-support#850

[TestPartners]

In this particular case I think a description list would be fine because the content would make sense to a screen reader user even if there was no semantic structure at all. However, that is not always the case, so it needs to be assessed individually each time.

[sarasuri]

@TestPartners Thank you,
We have another description list with slightly different content (see sreenshot below). In this case, we believe a data table would better represent the relationships between the content compared to a description list.

We would appreciate any thoughts or feedback on this approach.

[TestPartners]

In that case I think a data table would definitely give a better user experience, although a description list would be semantically valid. The approach I take is that if a description list already exists, I don't push for it to be replaced unless the user experience will be poor. On the other hand, if nothing has been built yet, I push very hard for a data table to be used.