Elementor’s accordion accessibility

  • Resolved shuangmiles

    (@shuangmiles)


    2 weeks ago

    I ran an accessibe scan and it flagged the unopened items from accordion widget as failure. The commend reads

    “When elements are visually hidden but still exposed to assistive technology, screen reader users may encounter content that should not be available in the current interface. This can obscure the current state of the page and lead to confusion about what information or controls are available.”

    And the failed elements are the title and icons

    <span class=”e-n-accordion-item-title-header”><div class=”e-n-accordion-item-title-text”> Staff responsibilities include </div></span>
    2
    <span class=”e-n-accordion-item-title-icon”> <span class=”e-opened”><svg xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; width=”158″ height=”226″ viewBox=”0 0 158 226″><image id=”_” data-name=”›” x=”17″ y=”71″ width=”124…

    It seems like unless the accordion item is already open it will fail this for some reason. But it seems to handle the aria-expanded toggling what seems to be the correct way. Any idea how to address this or is this a false positive on accessibe’s scan?

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Enrique

    (@eenrique)

    1 week, 6 days ago

    Hi @shuangmiles

    The “failure” you are seeing is what we call a “technical conflict” between how Elementor animates your content and how the accessible scanner interprets hidden elements. While Elementor correctly uses “ARIA” tags to tell screen readers the items are closed, the scanner is flagging the titles and icons because they are still “technically” there in the background to make the opening animation smooth.

    To fix this and clear the flag, we can apply a small piece of code that tells the browser to completely hide those specific icons until the moment they are clicked. This will satisfy the accessibility requirements without changing how your site looks or works.`

    
.e-n-accordion-item:not(.e-opened) .e-n-accordion-item-title-header {
    visibility: hidden;
}
.e-n-accordion-item.e-opened .e-n-accordion-item-title-header {
    visibility: visible;
}

    This specific fix targets the “hidden but exposed” issue by using visibility: hidden, which removes the element from the accessibility tree while preserving its space/layout properties if needed for the animation.

    I hope this helps.

    Please let me know how it went.

    Kind regards,

    Thread Starter shuangmiles

    (@shuangmiles)

    1 week, 6 days ago

    Would that cause screen readers to not atleast be able to read the title of the heading to know whether to open it or not?

    Plugin Support Milos

    (@miloss84)

    1 week, 2 days ago

    Hi,

    Video – https://www.loom.com/share/9ada4c4a9bd84856ab6df012f9dabc8d

    Since you are an Elementor Pro user, you can open a support ticket at my.elementor.com ref: https://elementor.com/help/how-to-submit-a-support-ticket/ I’d also suggest you check out Elementor Community Group on Facebook.

    We have created it to connect Elementor users together and share knowledge, Global Elementor Community.

    WordPress.org rules state that commercial products are not supported here.

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

You must be logged in to reply to this topic.

Tags