Search code examples
htmlcssaccessibility

Developing for accessibility and I am being told <li> "List item does not have a <ul>, <ol> or role="list" parent element"


Wondering what I am missing here. We are overhauling a site for a client who wants to make sure everything is compliant and I am getting an error that I can't seem to solve. I need to mention the source of the warning is a 3rd service that scans the pages of the site and presents issues in a report.

The error is this:

List item does not have a <ul>, <ol> or role="list" parent element

It is referencing this line (and all the others in the list like it:

<li id="get_started-scroll-button" class="scroll-button" data-element="get_started"></li>

This is the HTML. I recently added the role value to the ul to see if that would help but it did not. I get a warning about all the li in this list, and in others like it on other pages

...
<div class="col-12">
  <div class="container medium-font" style="margin:0px auto;">
    <ul class="scroll-subnav-list" style="list-style:none none;margin: 0;padding:0;float:none;" role="list">     
      
        <li id="overview-scroll-button" class="scroll-button scroll-button-container-first-el" data-element="overview">
          overview
        </li>
      
        <li id="resources-scroll-button" class="scroll-button scroll-button-container-els" data-element="resources">
           resources
        </li>
      
        <li id="get_started-scroll-button" class="scroll-button scroll-button-container-els" data-element="get_started">
           get started
        </li>
    </ul>
  </div>
</div>
...

What am I missing that would resolve the issue it is warning me about?


Solution

  • As the official W3C validator doesn't see any error, your code is fine. If your third party validator sees errors, I suggest you approach them via their Q&A or bug report website and asks them why they think it's wrong.

    As you (obviously) noticed, the error is inconsistant, because the said line does have a <ul> parent. It is a bug on your 3rd party service side.