Issue with Carousel on PageSpeed

  • websiteguru123

    (@websiteguru123)


    1 week, 5 days ago

    Hi,

    I’m seeing a new Agentic Browsing → Agent Accessibility error in Google PageSpeed Insights/Lighthouse on my WordPress site.

    The error is:

    Accessibility tree is not well-formed
    ARIA role should be appropriate for the element

    The failing element is a Kadence carousel slide using:

    <li class="kb-slide-item kb-gallery-carousel-item splide__slide is-visible is-active"
role="tabpanel"
aria-roledescription="slide"
aria-label="2 of 23">

    The carousel is generated by Kadence Blocks and uses Splide.

    Interestingly, I have two different Kadence carousels on the same website.

    One carousel is flagged by Lighthouse, while another carousel using very similar Kadence/Splide markup is not flagged.

    The flagged carousel uses the Kadence background slider:

    kt-blocks-carousel kb-blocks-bg-slider

    Its slides contain:

    <li class="splide__slide kb-bg-slide-contain"
role="tabpanel"
aria-roledescription="slide"
aria-label="1 of 5">

    The other carousel is a Kadence Advanced Gallery carousel:

    kb-gallery-type-carousel

    and uses:

    <li class="kb-slide-item kb-gallery-carousel-item splide__slide"
role="tabpanel"
aria-roledescription="slide"
aria-label="17 of 23">

    Both are functioning correctly visually and are accessible to normal users, but Lighthouse’s newer Agentic Browsingaudit is flagging one of them.

    I’ve already updated WordPress, the Kadence theme, and plugins, but the warning remains.

    Is this a known issue with the current Kadence/Splide carousel implementation, or is there a recommended way to resolve the ARIA role issue?

    I’m particularly interested in whether this is something that should be fixed within Kadence itself rather than adding custom JavaScript or modifying the generated carousel markup.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Eze

    (@chieze)

    1 week, 4 days ago

    Hi @websiteguru123,

    Thank you for the detailed report and the markup comparison.

    To further investigate this with your specific setup, could you please help with the following:

    1. A link to the page with the flagged background slider carousel
    2. A link to the page with the Advanced Gallery carousel that isn’t flagged, so we can compare both live.
    3. If possible, could you check whether the background slider block has a dot pagination and let us know if selecting a Dot Style in the Block Style tab > Arrow settings resolves the flag once you re-check Lighthouse?

    If it’s easier to share this information privately, could you please submit a support ticket here: https://software.liquidweb.com/support/, and you can reference this conversation.

    Thread Starter websiteguru123

    (@websiteguru123)

    1 week, 4 days ago

    Yes here is the errors both sites for facing:

    https://pagespeed.web.dev/analysis/https-www-iboswin-com-web/ubnh4rmpvo?form_factor=desktop


    Accessibility tree is not well-formed

    A well-formed accessibility tree helps AI agents to navigate and interact with the page.

    Failed Audits

    Description

    Failing Element

    ARIA role should be appropriate for the element

    2025 Launch Signature Event in Eaton, Ohio

    <li class=”kb-slide-item kb-gallery-carousel-item splide__slide is-visible is-active” id=”splide01-slide02″ role=”tabpanel” aria-roledescription=”slide” aria-label=”2 of 23″ style=”margin-right: 10px; width: calc(50% – 5px);”>




    https://pagespeed.web.dev/analysis/https-mississaugaunited-ca/dfv883xo3f?form_factor=desktop

    Accessibility tree is not well-formed

    A well-formed accessibility tree helps AI agents to navigate and interact with the page.

    Failed Audits

    Description

    Failing Element

    ARIA role should be appropriate for the element

    1 of 5

    <li class=”splide__slide kb-bg-slide-contain is-active is-visible” id=”splide02-slide01″ role=”tabpanel” aria-roledescription=”slide” aria-label=”1 of 5″ style=”width: calc(100%); transform: translateX(0%);”>

    Thanks in advance!

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

You must be logged in to reply to this topic.