Accordion Accessibility
Alex Block
In general, SPPB does a good job ensuring that content is accessible.
However, it content in accordions appears to be an issue, and I'm wondering if anyone come up with a solution to address this? When navigating a page using the tab key the accordion tabs are skipped over -- so there is no way to select an individual accordion and open it using just keyboard keys.
This makes it impossible for people to access content in an accordion if they are unable to use their mouse.
Al Mamun
Accepted AnswerHi,
Can you please indicate the page where accordion is exist. Send me the URL.
Thanks, Mamun
Paul Frankowski
Accepted AnswerHi, indeed that part has to be improved. Please check & compare default Accordion HTML code from boostrap 4. Or maybe you can find accordion script that is better in WCAG tests. Any suggestions help us improve our addon. Thx
Paul Frankowski
Accepted AnswerIn the meaintime I found this: https://www.aditus.io/patterns/accordion/
from where code you can use inside Raw HTML addon
I will talk with DEV team about implemenation in the future.
Paul Frankowski
Accepted AnswerIf we talk about opeing accordion items by keyboard keys, using key "Tab" + "Enter" you can open / close them. I tested that 60sec ago, and that worked.
Items have also aria-controls , aria-expanded, aria-labelledby tags.
And it works like in shared link from my post.
About using ArrowUp / ArrowDown there is a potential conflict when you use them to move focus between accordion headers, because these keys are normally used to scroll the whole page vertically.
OR do you have a different question ?? if yes, I need more technical details, and correct example.