CSS Menu

piotrh · Post by **piotrh** » Thu May 07, 2020 12:12 pm

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?

Post by **Pablo** » Thu May 07, 2020 12:23 pm

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

piotrh · Post by **piotrh** » Thu May 07, 2020 12:44 pm

Its about this page:
/link removed/

I dont think I did something unusual. Just configured css panel style properties, thats all...
P

Post by **Pablo** » Thu May 07, 2020 1:01 pm

The menu is correctly constructed.

piotrh · Post by **piotrh** » Thu May 07, 2020 1:13 pm

Ok. Any Idea why it fails this test? I tried many times. Output messaage is always like I mentioned before. :/

Post by **Pablo** » Thu May 07, 2020 1:27 pm

Maybe the test does not like that you have moved the scripts and css to the end of the page? (in Tools->Options->HTML)

piotrh · Post by **piotrh** » Thu May 07, 2020 1:42 pm

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

Post by **Pablo** » Thu May 07, 2020 2:21 pm

If you manually check the code then you can see it's correct

piotrh · Post by **piotrh** » Thu May 07, 2020 2:31 pm

Pablo, Im not saying it is not correct.
I'm just trying to figure out why google lighthouse sees it as incorrect.

P

Post by **Pablo** » Thu May 07, 2020 2:59 pm

I'm sorry, I am not familiar with google lighthouse.
But I think the problem is somewhere else.

robertz · Post by **robertz** » Thu May 07, 2020 6:22 pm

@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

piotrh · Post by **piotrh** » Thu May 07, 2020 6:41 pm

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%.

crispy68 · Post by **crispy68** » Thu May 07, 2020 7:55 pm

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

piotrh · Post by **piotrh** » Thu May 07, 2020 8:03 pm

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

crispy68 · Post by **crispy68** » Thu May 07, 2020 8:06 pm

Correct. I only did your homepage. The results I saw is what I stated before. No issues with the <li> tags.

piotrh · Post by **piotrh** » Thu May 07, 2020 9:06 pm

Here is what I got everytime:

crispy68 · Post by **crispy68** » Thu May 07, 2020 9:34 pm

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.

crispy68 · Post by **crispy68** » Thu May 07, 2020 9:38 pm

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.

piotrh · Post by **piotrh** » Fri May 08, 2020 7:24 am

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

www.wysiwygwebbuilder.com

CSS Menu

CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu

Re: CSS Menu