SEO help: Lists do not contain only <li> elements and script supporting elements (<script> and <template>)

364 Views Asked by At

Page Speed Insights is giving me the following error message for Accessibility:

Lists do not contain only li elements and script supporting elements (script and template)

Below are the code snippets that are generating this message. I'm not quite sure what needs to be done here to stop generating the errors, any advice would be much appreciated!

    <ul class="slide_tit swiper-pagination-clickable swiper-pagination-bullets">
    <li class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1">
    <li class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2">
    <li class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3">
1

There are 1 best solutions below

1
Jess On

This is part of the accessibility standard-- you can read more about this specific point at deque University.

It looks like you're using the <li> elements as buttons for a carousel: a better method for creating accessible carousels is here -- generally, you should avoid using list markup on slides. Screen Readers announce how many items will be on a list, but if you hide certain elements it will be inaccurate.

Be sure to close your <li> elements, and you should not include any content other than paragraphs, links etc between the opening and closing <li>-- that's what the error means. If you're using the lists for a purpose that isn't a list, use a different element.