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.