Erroneous: "List items (<li>) are not contained within <ul> or <ol> parent elements."

Provide the steps to reproduce

1. Run an accessibility audit on https://app.nxtboard.com/meetings/nxtboard-sqa/

What is the current behavior?

Error:

List items (<li>) are not contained within <ul> or <ol> parent elements.

What is the expected behavior?

This error does not appear. The <li>s in question are definitely contained inside a <ul> element.

Environment Information

• Affected Channels: DevTools
• Lighthouse version: I don’t know. Chrome version is 76.0.3809.132 (Official Build) (64-bit).
• Node.js version: n/a
• Operating System: macOS 10.14.6

[robdodson]

It does appear their guide is incorrect according to axe. If the role=“tab” were on the li elements instead of the a elements it would pass.

What happens if you put role=presentation on the li element? That should essentially remove it from the accessibility tree.

By manually annotating role=X we are providing that semantic meaning for screen readers, so there should not be a disadvantage compared to ul/li AFAIK.

Yep, that’s correct. It’s also worth noting that, in Safari at least, if you change the display of a list then they throw out its semantics anyway (see the last comment in this ticket).

I think over the years it became a common practice to put navigation into ul/li elements, but that practice probably predates ARIA and has just stuck around. Since you’re redefining the semantics with ARIA it doesn’t matter much what the underlying HTML element is in this case.

[elijah-schow]

@patrickhulce It looks like Axe reports the same issue. I think your hypothesis might be right. Setting their role to "tab" fixes the issue, but I think the anchor tags are supposed to have that role instead of the list items.

I can also work around the issue by using div’s instead of list items:

Replacing the <ul> and <li> elements with <div>s fixes the issue:

<div role="tablist" class="nav nav-tabs card-header-tabs">
    <div class="nav-item">
        <a href="#"  class="nav-link active" role="tab">Upcoming</a>
    </div>
    <div class="nav-item">
        <a href="#" class="nav-link" role="tab">Previous</a>
    </div>
</div>

This doesn’t match Bootstrap 4’s suggested markup, but maybe their guide is wrong? Is there is disadvantage to using divs instead of list items?