-
Posts
-
We’re having a lot of screen reader accessibility issues with the accordion/toggle element. We are testing our site with NVDA, a free screen reader (https://www.nvaccess.org/download/).
The biggest issue is, though each accordion section can be expanded using the enter key, the screen reader can’t read the text contained in the expanded panel. If there is a focusable element within the panel, the user can tab to that, and then the screen reader can access any content within the panel that comes after that focusable element; but if there is no focusable element, there doesn’t seem to be any way for the screen reader to access the content of the expanded panel.
There are also issues with the header of each accordion section. When the header has focus, the screen reader reads the header text, but does not state if the section is open or closed, and does not clearly indicate what type of control the user is interacting with. For example, for a section titled “question one”, the screen reader reads “tab control question one filled right pointing small triangle tab selected 1 of 1”. Ideally, it would say something more like “question one button collapsed” – this concisely tells the user the title of the section, conveys that it’s an interactable expand/collapse element, and indicates the current expanded/collapsed state.
I was able to replicate the screen reader issues on the accordion demo page, https://kriesi.at/themes/enfold-2017/elements/accordion/, so I don’t think the issue is with our child theme.
Here are some resources that describe how to implement an accessible accordion element, and that lay out the accessibility requirements: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ and https://www.aditus.io/patterns/accordion/.
https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ has an example of an accessible accordion.
Is this something that can be addressed in a future Enfold update, and in the short term, would there be a way to apply a fix via our child theme?
Thank you for your help with this!
Hey PCLSIT,
Thank you for your patience, I see that you are using version 5.6.9 but we have added many accessibility updates since then so please update to 5.7.1 and check again.
There is one issue that I believe you are referring to:
Tabs that have already been clicked receive the attribute tabindex=-1. This means that once you have selected tabs, you cannot access them again using the Tab key, as these tabs are removed from the navigation tree. Tabindex=0 should be kept.
for this you will need to use enter to open tab content when tab has focus because of the defined key behavior we loose focus.
These latest updates were for European Accessibility Act (EAA), with
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
If after updating you find that this doesn’t help please open a Feature Request with the Dev Team, as this will allow you to follow and add updates as the Dev Team reviews.
Hopefully our recent changes will address what you are seeing.Best regards,
MikeThank you, and my apologies – I should have mentioned, our testing has been performed in our development environment, which has already been updated to 5.7.1. All the issues I described are present in the latest version. And these are issues with the accordion element, not the tab element. I’ll open a feature request!
- You must be logged in to reply to this topic.