Page 1 of 1
CSS Menu
Posted: Thu May 07, 2020 12:12 pm
by piotrh
Pablo,
I used Google lighthouse to check site I made. Results are great but there is one element I would like to fix but dont know how:
List items (<li>) are not contained within <ul> or <ol> parent elements.
Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly
How can I correct this?
Re: CSS Menu
Posted: Thu May 07, 2020 12:23 pm
by Pablo
What exactly did you do?
What are your settings?
Do you have a demo project?
Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134
Re: CSS Menu
Posted: Thu May 07, 2020 12:44 pm
by piotrh
Its about this page:
/link removed/
I dont think I did something unusual. Just configured css panel style properties, thats all...
P
Re: CSS Menu
Posted: Thu May 07, 2020 1:01 pm
by Pablo
The menu is correctly constructed.
Re: CSS Menu
Posted: Thu May 07, 2020 1:13 pm
by piotrh
Ok. Any Idea why it fails this test? I tried many times. Output messaage is always like I mentioned before. :/
Re: CSS Menu
Posted: Thu May 07, 2020 1:27 pm
by Pablo
Maybe the test does not like that you have moved the scripts and css to the end of the page? (in Tools->Options->HTML)
Re: CSS Menu
Posted: Thu May 07, 2020 1:42 pm
by piotrh
Moving scripts and css to end of page improved performance metrics (+10-15%).
Before and after moving them, list items were listed as Failing Elements.
P
Re: CSS Menu
Posted: Thu May 07, 2020 2:21 pm
by Pablo
If you manually check the code then you can see it's correct
Re: CSS Menu
Posted: Thu May 07, 2020 2:31 pm
by piotrh
Pablo, Im not saying it is not correct.
I'm just trying to figure out why google lighthouse sees it as incorrect.
P
Re: CSS Menu
Posted: Thu May 07, 2020 2:59 pm
by Pablo
I'm sorry, I am not familiar with google lighthouse.
But I think the problem is somewhere else.
Re: CSS Menu
Posted: Thu May 07, 2020 6:22 pm
by robertz
@piotrh
Maybe if you move just the following 4 links back to / between <head></head> tags
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="favicon-64x64.png" rel="icon" sizes="64x64" type="image/png">
<link href="apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
you will make google lighthouse happy!
See the validator:
https://validator.w3.org/nu/?doc=https% ... tyja.pl%2F
Re: CSS Menu
Posted: Thu May 07, 2020 6:41 pm
by piotrh
Hello @robertz
Thank You for Interest in the topic. Unfortunately changing location of elements mentioned in Your reply did not make lighthouse happy.
It has problem with css menu. If i change li to div i got highiest score in Accessibility (but my menu is broken, of course). If I change it back to li score is lowered to 96%.
Re: CSS Menu
Posted: Thu May 07, 2020 7:55 pm
by crispy68
I looked at your site in Chrome and did and audit and I don't see anything mentioned about the <li> tags failing. Under the accessibility, it showed that this 'passed' the audit. What I showed that 'failed' was "links do not have a discernible name" and the failing element was a#OverlayMenu1
Re: CSS Menu
Posted: Thu May 07, 2020 8:03 pm
by piotrh
Hello crispy68,
If You hit f12 in chrome google lighthouse tool will show up. Then after generating raport You should see Performance, Accessibility, Best Practices and SEO meters. If You click on Accessibility score it will scroll down to point where it tells about list items being cause of lowering the score.
P
Re: CSS Menu
Posted: Thu May 07, 2020 8:06 pm
by crispy68
Correct. I only did your homepage. The results I saw is what I stated before. No issues with the <li> tags.
Re: CSS Menu
Posted: Thu May 07, 2020 9:06 pm
by piotrh
Here is what I got everytime:
Re: CSS Menu
Posted: Thu May 07, 2020 9:34 pm
by crispy68
I've tried on 2 different computers at 2 different locations and i'm not seeing any issue. This is what I see:
As you can see, the <li> tags passed. To be honest, it is clear by the html code that the <li> tags are correct as Pablo stated before. So despite what you are seeing, the code is correct.
Re: CSS Menu
Posted: Thu May 07, 2020 9:38 pm
by crispy68
Actually, I tested it on the mobile setting and it passes which to me makes no sense. When tested on 'desktop' I now see what you are seeing.
However, it is wrong as it is in a <ul> tag. The drilldown menu you are using is set up the same way and not being flagged.
Personally, I wouldn't worry about it as you can confirm it is correct. Google is not always 100% accurate.
Re: CSS Menu
Posted: Fri May 08, 2020 7:24 am
by piotrh
I'm not concerned too much about it. Just thougt if i can have 100% - why shoul'dnt I try?
Site builded in WWB performs great and I'm very happy because of that.
Thank You for Your time crispy68.
P