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.
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.
This will need to be accounted for at the code level so it’ll be resolved in a Widgets Bundle update.
Kind regards,
Alex
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
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