Accessibility false reports regarding <dl>, <dd>, and <dt>

[RoryDuncan]

Lighthouse's Accessibility sections is reporting — and marking down — the following html structure, claiming it fails the 'Elements are Well-Structured' test.

  <dl>
    <div>
      <dt>VIN dt</dt>
      <dd>VIN dd</dd>
    </div>
    <div>
      <dt>VIN dt</dt>
      <dd>VIN dd</dd>
    </div>
  </dl>

The above abides by specification for the <dl> tag:

The dl element represents a description list of zero or more term-description groups. Each term-description group consists of one or more terms (represented by dt elements) possibly as children of a div element child, and one or more descriptions (represented by dd elements possibly as children of a div element child)**, ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children within a single dl element.

Steps to reproduce

1. Run LH on https://s.codepen.io/RoryDuncan/debug/wEgEWR/NjkYzqWobpBM
2. Go to Elements are Well-Structured section of Accessibility.
3. Observe warnings listed.

Resulting Report:

Case that Screen Readers may produce confusing or inaccurate output

Both ChromeVox and Windows Narrator skip over

elements completely. 🤷‍♂️

[justinribeiro]

Hi thanks for the issue! This is specific to aXe, which LH uses behind the scenes to handle accessibility audits.

In the case you mention, there's an upstream bug that was recently merged that resolves this dequelabs/axe-core#262 and there is an open PR that bumps LH's aXe version up bring it up to date, which ideally will include said fix: #5565

[RoryDuncan]

oh cool, thanks for the info, Justin. 😄
I subscribed to that pull request — I'll close this when it has been merged.