Home > Back-end >  Developing for accessibility and I am being told <li> "List item does not have a <ul&g
Developing for accessibility and I am being told <li> "List item does not have a <ul&g

Time:10-18

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?

CodePudding user response:

I know this has already been answered and accepted, but this seems relevant so I'm planting it here for future reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility_concerns

Safari will not recognize an unordered list as a list in the accessibility tree if has a list-style value of none.

CodePudding user response:

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.

  • Related