Lighthouse errors

  • Resolved zimbo000

    (@zimbo000)


    4 years, 3 months ago

    Google Lighthouse tool is reporting errors from MetaSlider.

    1. Image elements do not have [alt] attributes (in Accessibility and SEO)

    Failing Elements
div.slider-wrapper > div#metaslider_10197 > div.nivo-slice > img
<img src="https://www.americanroadtrips.net/wp-content/uploads/2020/10/Monument-Vall…" style="position:absolute; width:700px; height:auto; display:block !important; top…">

    Lighthouse is calling out these such lines:
    <div class="nivo-slice" name="5" style="left: 235px; width: 47px; height: 525px; opacity: 0; overflow: hidden;"><img src="https://www.americanroadtrips.net/wp-content/uploads/2020/10/Monument-Valley-1.jpg" style="position:absolute; width:700px; height:auto; display:block !important; top:0; left:-235px;"></div>
    which as can be seen do not have the ALT tags that are set in slider setup and are included in the IMG lines just after the start of the slider code
    <div id="metaslider_10197" class="nivoSlider">
    e.g.
    <img src="https://www.americanroadtrips.net/wp-content/uploads/2020/10/Monument-Valley-1.jpg" height="525" width="700" data-caption="Views around Monument Valley" title="Monument Valley #1" alt="Monument Valley #1" class="slider-10197 slide-10198" style="width: 700px; visibility: hidden; display: inline-block;">

    2. Links are not crawlable (in SEO)

    Uncrawlable Link
a.nivo-prevNav
a.nivo-nextNav
a.nivo-control.active
a.nivo-control

    All elements of each slider’s control buttons are reported as “uncrawlable”.

    ———————–

    You can verify this by checking the referenced page. But all the sliders on all pages report the same errors.

    How can this be fixed to overcome the Lighthouse errors?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Gal Baras

    (@galbaras)

    4 years, 3 months ago

    Is this related to the latest version specifically?

    Can you confirm that your images have ALT text in their media records? If not, check what happens when you add that.

    • This reply was modified 4 years, 3 months ago by Gal Baras.
    Arreane

    (@yanex)

    4 years, 3 months ago

    Hi Gal,

    MetaSlider does support ALT text. Make sure that there is value in your Alt field. If it doesn’t, you can uncheck the “Use the image alt text” and enter the Alt text value manually. https://share.getcloudapp.com/jkumj70Y

    The arrows and the dots are intended to not be crawlable as this are actual links, and are only use for animation purposes.

    Thread Starter zimbo000

    (@zimbo000)

    4 years, 3 months ago

    @yanex

    The media images generally do not have ALT text, but I add ALT values manually in each slide, unchecking the “Use the image alt text” box.

    You can see the ALT text in the last img code line of #1 in my original post.

    The problem is the ALT is not being copied over into the img code nested inside these divs:
    <div class="nivo-slice" name="5" style="left: 235px; width: 47px; height: 525px; opacity: 0; overflow: hidden;">

    This is causing Lighthouse to class these lines as in error, which needs to be rectified.

    ——————–

    Whether “The arrows and the dots are intended to not be crawlable” is, I might suggest, irrelevant. The detail of the error from Lighthouse states “Search engines may use href attributes on links to crawl websites. Ensure that the href attribute of anchor elements links to an appropriate destination, so more pages of the site can be discovered.”

    A typical line of code for the dots is
    <a class="nivo-control" rel="2">3</a>
    which because there is no href attribute on the ‘a’ element, Lighthouse errors it and marks down the SEO score. This also needs fixing (somehow).

    ——————-

    As Lighthouse (and Core Web Vitals) become more widely known and used, your plugin is going to keep creating these errors until the code gets modified to stop causing them. I might suggest that in time you’ll be getting a lot more “comments” in this forum about this (I’m slightly amazed no-one has discovered this before) so it might be pertinent to address the issues now. Please…

    Gal Baras

    (@galbaras)

    4 years, 3 months ago

    MetaSlider does support ALT text

    @yanex that was MY point. I’m not the OP.

    Arreane

    (@yanex)

    4 years, 2 months ago

    @zimbo000 Thanks, I am now able to see what you mean.

    Unfortunately, the image inside the .nivo-slice container is part of the Nivo slider library. I’m not sure if we’re able to update the following code or if this is a limitation with the library. However, I will be escalating this to our development team and see what we can do.

    In regards to the navigation links, I have created a ticket for the issue to get fixed. Hopefully this will be added on the next release. I’ll update you as soon as it gets fixed.

    Thread Starter zimbo000

    (@zimbo000)

    4 years, 2 months ago

    @yanex – glad we got to an understanding of the issues here… 🙂

    Hopefully you can alter the code to stop Lighthouse reporting these errors.

    Plugin Author Steve Burge

    (@stevejburge)

    4 years, 1 month ago

    Thanks @zimbo000

    Look for a fix to arrive in version 3.27.4 of MetaSlider.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Lighthouse errors’ is closed to new replies.