Accessibility Issues with Toggle Elements

dojwebmaster

We have a website that uses BeTheme and needs to meet WCAG 2.0 Accessibility Standards.

When navigating on a page with a keyboard, using only TAB and ENTER keys, Toggle Elements are not viewable. Tab focuses onto only the small Icon of a toggle element, but pressing Enter does not open toggle section.

The FAQ element has the desired behavior, with the entire button being highlighted, and the ENTER key opening expanding the accordion content.

In Theme Options>Accessibility, Keyboard Support is Enabled.

Thank you for your assistance, this is a major issue that prevents our website from complying with modern accessibility standards.

Phil

Hi,

I have passed it on to the dev team.

We will correct it in the upcoming update.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

dojwebmaster

I saw that this fix was included in recent updates, thank you for working on this!

Functionality for Toggles now works well with Tab Focus and Enter Key. This helps meet minimum requirements, but could still be improved to fully meet accessibility standards.

For best practices, Toggles and FAQ Elements should also be expandable by SPACE Key. I think Role for the accordion item <div> elements should be role="button" rather than role="link" ?

See accessible design patterns for accordions:

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

Also for reference, this page shows proper setup for <div> elements with role="button"

https://www.w3.org/WAI/ARIA/apg/patterns/button/examples/button/

Also, a quick reference on buttons vs links in terms off accessibility:

https://www.w3schools.com/accessibility/accessibility_buttons_links.php

Phil

Thanks for letting us know. I passed it on to the dew team, and we will also correct this.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

dojwebmaster

Confirmed that this issue was fixed in the most recent 28.0.5 update. Thanks!