Home>Support>SiteOrigin – Anything Carousel and Accessibility

SiteOrigin – Anything Carousel and Accessibility

Our company is being audited by the AODA (Ontario’s Accessibility) and needs to conform to WCAG AA. We have a carousel slider right now with 6 slides and our scanner is detecting “ARIA hidden element must not be focusable or contain focosable elements. Some details:

Line:

Resolution: Focusable content should have tabindex=”-1″ or be removed from the DOM

Please let me know if that something you can update or I have ability to adjust in the backend.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 2 months, 15 days ago Alex S
    Hi, I Work Here

    Hi Vince,

    Thanks for getting in touch. Can you please provide me with a link to the specific tool you’re using? I’ve had a look at our carousels, and I can’t seem to find what may be triggering this using the typical tools I use to look for accessibility issues.

    Please let me know if that something you can update or I have ability to adjust in the backend.

    This will need to be accounted for at the code level so it’ll be resolved in a Widgets Bundle update.

    Kind regards,
    Alex

  2. 2 months, 11 days ago Vince leung

    Hey Alex,

    FIrst off thanks for the quick reply and sorry for the delayed response. So I’m using the Axe Devtools which was recommended by the Government of Ontario to help with compliance with AODA. link to the plugin is found here: Axe-core Chrome Plugin (Freeware)

    But basically the error that the plugin is reporting are on the following page: https://www.mayfairclubs.com/fitness/group-fitness/cycle-classes/

    The slider in the middle is utilizing site origin’s “SiteOrigin Anything Carousel”. Error Codes (utilizing Axe Core):

    1) ARIA Hiddene element must not be focusable elements. Screenshot link: https://snipboard.io/f8Q3TK.jpg

    Thanks

    VInce

  3. 2 months, 8 days ago Alex S
    Hi, I Work Here

    Hi Vince,

    Thank you for the additional information. I initially tested using the Firefox version of Axe DevTools. It’s possible there are some differences in how the extensions work so I’ve tried Chrome, and haven’t been able to replicate this issue. Looking at your screenshot again, I see that you’ve reduced the browser width. Upon doing the same, I was able to replicate this alert. Thank you for the screenshot.

    It appears the Slides to Show setting is higher than the browser width allows for. Please open the Anything Carousel you’re working on. Open the Responsive section, and then open the Tablet section. Decrease the Slides to Show setting, and then save. How does that look?

    Kind regards,
    Alex

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More