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

Issue

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.

Answered By – SteeveDroz

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published