Support expanded definition list rule in the WHATWG HTML spec which allows for divs as parents of dt/dds #262

Blackbaud-MattGregg · 2016-12-05T13:16:26Z

I was wondering if the definition list rule would or should ever be expanded to the WHATWG HTML spec which seems to allow for divs as parents of dt/dds (https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element) if screen readers/browsers support this (I don't know if they do)? I imagine the WCAG is strict to the W3C's HTML5 spec, but don't know for sure.

I've had this come up and trying to figure out how to avoid disabling this rule or find some other semantic markup for the relationships given the divs can't be changed.

dylanb · 2016-12-08T16:13:53Z

@Blackbaud-MattGregg the WHATWG spec is a "living document", do you know what the support is from an accessibility perspective of definition lists with <div> children vs ones with just the dt or dd directly?

Blackbaud-MattGregg · 2016-12-08T21:33:17Z

I can't say that I do though I'm not sure what you mean by "support from an accessibility perspective"...do you mean screenreaders can handle this without issues or something else?

Mozilla has it in their HTML reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#Wrapping_name-value_groups_in_<div>_elements and stated at least at one point they follow WHATWG when they differ (https://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/). However, I don't know what is really implemented from an accessibility perspective or browser accessibility tree.

dylanb · 2016-12-08T21:58:28Z

We need to verify equivalent semantic exposure by all browsers on all platforms in the accessibility tree.

I have verified Safari: OS X + VoiceOver

@marcysutton @WilcoFiers can you verify other platforms?

Blackbaud-MattGregg · 2016-12-09T14:41:20Z

Gotcha. I'm not sure what you do to verify, but let me know if there is something I could chip in on. On Mac Chrome when I look at two version of the a11y in the inspector this is what is shows

WebArea "asdf"
- DescriptionList
  - DescriptionListTerm
  - DescriptionListDetail

then with div

WebArea "asdf"
- DescriptionList
- Ignored
  - DescriptionListTerm
  - DescriptionListDetail

The ignored div properties read out as "Accessibility node not exposed Element not interesting for accessibility."

dylanb · 2016-12-09T15:09:50Z

I did three things to validate support:

Does the browser leave the DIV in the DOM when rendered? (using the developer tools inspector)
Does the screen reader announce the element the same way? (sometimes this means no announcement at all for definition lists - but for OSX Safari VO, it announces the number of items in the list as a whole)
Does the accessibility tree look the same?

In your example, it would be failing number 3 - but this Chrome on Mac is not a supported platform anyway, so that does not matter. Also having the only difference be "ignored" would be ok as long as the other two tests pass.

Important are:

Windows, IE, JAWS 18
Windows, Firefox, NVDA

iOS, Safari, VO

extra credit

Android, Firefox, Talkback

web-bert · 2017-07-17T12:41:34Z

Hi, any ideas when this will get added? Is there a way I disable this rule for now as it's making my tests fail?

glouischandra · 2017-10-06T19:15:01Z

+1 ping on this as well. We also noticed this in our project. If there's gonna be a timeline on when the rule will be updated it will be much appreciated :)

WilcoFiers · 2017-10-08T13:41:42Z

@glouischandra Appreciate the ping. We need to properly test that this works well in assistive technologies as Dylan suggested. If you can provide the test data, that'd be much appreciated.

Malvoz · 2017-12-07T12:21:04Z

I do not currently use any accessibility inspector, however I do have ChromeVox (v. 53.0.2784.5) installed on my Windows pc, and the screen reader reads out the <dt>s and <dd>s all the same, with or without wrapping <div>s.

HTML structure for the tests:

Classic `<dl>` without `<div>`s:

<!doctype html>
<html lang="en">
<title>document title</title>
<body>
  <dl>
    <dt>description term</dt>
    <dd>description definition</dd>
  </dl>
</body>
</html>

`<div>` wrapping group of `<dt>`/`<dd>`:

<!doctype html>
<html lang="en">
<title>document title</title>
<body>
  <dl>
    <div>
      <dt>description term</dt>
      <dd>description definition</dd>
    </div>
  </dl>
</body>
</html>

Result:

ChromeVox reads out the description list and its children as it should - with or without wrapping <div>.

However I noticed when I updated the page in the browser, ChromeVox in both cases read only the <title> and <dd>, not the <dt>. This might be a ChromeVox bug, though I should add I'm not an avid screen reader user and I haven't read the ChromeVox manual..

@WilcoFiers

WilcoFiers · 2017-12-08T15:10:15Z

Thanks for the test. We'll need results from the screen readers Dylan mentioned above:

Windows, IE, JAWS 18
Windows, Firefox, NVDA
iOS, Safari, VO

Malvoz · 2017-12-21T16:03:48Z

@WilcoFiers
@dylanb

Did a test with NVDA 2017.4 on Windows, Firefox 57.0.2 using the exact same HTML structure as above.

In both cases the document was read out the same, and the NVDA Speech viewer logged:

document title
list with 2 items
description term
description definition

The <div> element was visible in the DOM as expected.

WilcoFiers · 2017-12-21T16:59:31Z

Excellent. VoiceOver seems okay with it as well.

marcysutton · 2018-03-20T20:42:25Z

Does anyone have an Android device they can test with TalkBack? In iOS Safari+Voiceover, none of the roles are read aloud for me when I swipe through, just the content ("description term", "description definition"). Adding a DIV doesn't seem to make a difference.

dylanb · 2018-04-01T19:59:29Z

@marcysutton ask @chriscm2006 if he can do the test or give @isner a device to test in A2

Malvoz · 2018-04-18T16:54:36Z

@marcysutton @dylanb

I tested the markup on my Samsung Galaxy S8, Android 8.0.0 with Google Chrome 65.0.3325109 using Voice Assistant.

Results were consistent with or without <div> wrappers.
When I loaded the test page, Voice Assistant read out "document title", but did not read out "description term" and "description definition" unless I pressed the text.

Also <dd>description definition</dd> was actually read out "description definition definition".

I believe there are issues in general using Voice Assistant, even reaching something simple as
<p>text <a href="#">anchor</a> text</p> it would read out "text text", in other words completely ignoring the anchor text (this was tested on a blog post with natural text and an achor with a real link destination, if that matters).

Conclusion

No difference in how <dt>|<dd> was treated wether it had a <div> wrapper or not. Voice assistant probably has major issues on its own.

WilcoFiers · 2018-05-07T10:00:38Z

We checked internally as well and have confirmed the findings. We should allow this in axe-core.

kensgists · 2018-05-17T13:39:30Z

Thumbs up on this one, as well. Interesting finding: The only way NVDA 2017.2 through 2018.1 correctly report the number of groupings in the list (dt + 1 or more dd) is if you use divs as containers for the groupings.

My results:

JAWS 2018 + IE 11: correct enumeration with our without
NVDA 2018.1 + FF 61: correct enumeration ONLY if you use divs, otherwise treats each dt or dd as a list item.
iOS 11.2 VO + Safari: No support for description lists, regardless of nesting (boo! bad Apple)
Mac OS 10.13 High Sierra VO version 8 + Safari (latest): Regardless of div nesting, when entering list correct number of item grouping reported. Then when browsing, each dt or dd is reported as an individual list item.
Android 8.1 with Talkback 6.1 + Chrome 66: Reads each dd prepended with word "definition" regardless of div nesting.

In addition, it is worth noting that HTML 5 now explicitly allows using divs to group:
https://www.w3.org/TR/html/grouping-content.html#the-dl-element

Allow div elements to group content inside of dl elements. Closes #262 ## Reviewer checks **Required fields, to be filled out by PR reviewer(s)** - [x] Follows the commit message policy, appropriate for next version - [x] Has documentation updated, a DU ticket, or requires no documentation change - [x] Includes new tests, or was unnecessary - [x] Code is reviewed for security by: Jey

delrueba · 2018-09-04T13:13:24Z

I'm still getting these errors:

- <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script> or <template> elements
- <dt> and <dd> elements must be contained by a <dl>

On HTML I've plucked from the test files:
<dl id="target"><div role="listitem"><dt>An item</dt><dd>A list</dd></div></dl>

I'm using gulp-axe-webdriver with axe-core 3.1.1.
My A11yCheckOptions are

      a11yCheckOptions: {
        runOnly: {
          type: 'tag',
          values: ['wcag2a', 'wcag2aa']
        }
      }

I noticed some changes from this issue were overwritten and are not included in the 3.1.1 release.
https://github.com/dequelabs/axe-core/commits/3.1.1/lib/checks/lists/only-dlitems.js

Could this be the issue? Or am I missing something in my setup?

Thanks for your help!

kensgists · 2019-02-14T16:16:23Z

Thumbs upping this one, again.

The fix seems to have been reverted. As of axe-core 3.1.2 an dl > div > dt+dd still causes a violation of "dl-item" (though not "definition-list").

jebw · 2019-07-23T14:12:46Z

We're hitting this issue as well

Downloaded Axe for the first time today - release 3.8.0 - and its reporting errors with the dl > div > dt structure

straker · 2019-08-05T15:27:57Z

@jebw @kensgists Sorry it's taken awhile to respond. If you're still seeing issues please open a new issue so we can track this better.

…#262)

marcysutton mentioned this issue Apr 26, 2017

Support HTML 5.2 dl changes #301

Closed

marcysutton changed the title ~~Question: definition list rule expanded to the WHATWG HTML spec which allows for divs as parents of dt/dds~~ Support expanded definition list rule in the WHATWG HTML spec which allows for divs as parents of dt/dds Apr 26, 2017

WilcoFiers added the help wanted We welcome PRs or discussions for issues marked as help wanted label Oct 8, 2017

Malvoz mentioned this issue Dec 6, 2017

Don't alert when <div> inside <dl>. GoogleChrome/lighthouse#3999

Closed

WilcoFiers added fix Bug fixes rules Issue or false result from an axe-core rule and removed help wanted We welcome PRs or discussions for issues marked as help wanted labels Jul 3, 2018

WilcoFiers mentioned this issue Aug 15, 2018

fix: Allow divs as groups in dl #1076

Merged

4 tasks

kr8n3r mentioned this issue Aug 21, 2018

Check answers alphagov/govuk-design-system-backlog#36

Open

WilcoFiers closed this as completed in #1076 Aug 22, 2018

justinribeiro mentioned this issue Aug 31, 2018

Accessibility false reports regarding <dl>, <dd>, and <dt> GoogleChrome/lighthouse#5940

Closed

marcysutton mentioned this issue Oct 24, 2018

Div disallowed as immediate child of <dl> #1201

Closed

honoka-h mentioned this issue Dec 21, 2018

div as parents of dt/dd #1289

Closed

thatbudakguy mentioned this issue Feb 4, 2019

Search results dt and dd should be contained by dl Princeton-CDH/ppa-django#237

Closed

mcheung-nhs mentioned this issue Feb 27, 2019

[refs #384] Create summary list component from GOV.UK nhsuk/nhsuk-frontend#404

Merged

3 tasks

tmakin mentioned this issue Mar 25, 2019

Summary list alphagov/govuk-design-system-backlog#182

Open

myasonik mentioned this issue Aug 18, 2021

Deque University docs don't line up with axe-core #3125

Closed

mrtnvh pushed a commit to mrtnvh/axe-core that referenced this issue Nov 24, 2023

fix: pass chrome options to chromeOptions.addArguments() (dequelabs…

715f463

…#262)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support expanded definition list rule in the WHATWG HTML spec which allows for divs as parents of dt/dds #262

Support expanded definition list rule in the WHATWG HTML spec which allows for divs as parents of dt/dds #262

Blackbaud-MattGregg commented Dec 5, 2016

dylanb commented Dec 8, 2016

Blackbaud-MattGregg commented Dec 8, 2016 •

edited

Loading

dylanb commented Dec 8, 2016

Blackbaud-MattGregg commented Dec 9, 2016

dylanb commented Dec 9, 2016 •

edited

Loading

web-bert commented Jul 17, 2017

glouischandra commented Oct 6, 2017

WilcoFiers commented Oct 8, 2017

Malvoz commented Dec 7, 2017 •

edited

Loading

WilcoFiers commented Dec 8, 2017

Malvoz commented Dec 21, 2017

WilcoFiers commented Dec 21, 2017

marcysutton commented Mar 20, 2018

dylanb commented Apr 1, 2018

Malvoz commented Apr 18, 2018 •

edited

Loading

WilcoFiers commented May 7, 2018

kensgists commented May 17, 2018

delrueba commented Sep 4, 2018

kensgists commented Feb 14, 2019

jebw commented Jul 23, 2019

straker commented Aug 5, 2019 •

edited

Loading

Support expanded definition list rule in the WHATWG HTML spec which allows for divs as parents of dt/dds #262

Support expanded definition list rule in the WHATWG HTML spec which allows for divs as parents of dt/dds #262

Comments

Blackbaud-MattGregg commented Dec 5, 2016

dylanb commented Dec 8, 2016

Blackbaud-MattGregg commented Dec 8, 2016 • edited Loading

dylanb commented Dec 8, 2016

Blackbaud-MattGregg commented Dec 9, 2016

dylanb commented Dec 9, 2016 • edited Loading

web-bert commented Jul 17, 2017

glouischandra commented Oct 6, 2017

WilcoFiers commented Oct 8, 2017

Malvoz commented Dec 7, 2017 • edited Loading

HTML structure for the tests:

Classic <dl> without <div>s:

<div> wrapping group of <dt>/<dd>:

Result:

WilcoFiers commented Dec 8, 2017

Malvoz commented Dec 21, 2017

WilcoFiers commented Dec 21, 2017

marcysutton commented Mar 20, 2018

dylanb commented Apr 1, 2018

Malvoz commented Apr 18, 2018 • edited Loading

Conclusion

WilcoFiers commented May 7, 2018

kensgists commented May 17, 2018

delrueba commented Sep 4, 2018

kensgists commented Feb 14, 2019

jebw commented Jul 23, 2019

straker commented Aug 5, 2019 • edited Loading

Blackbaud-MattGregg commented Dec 8, 2016 •

edited

Loading

dylanb commented Dec 9, 2016 •

edited

Loading

Malvoz commented Dec 7, 2017 •

edited

Loading

Classic `<dl>` without `<div>`s:

`<div>` wrapping group of `<dt>`/`<dd>`:

Malvoz commented Apr 18, 2018 •

edited

Loading

straker commented Aug 5, 2019 •

edited

Loading