Accordion Accessibility - Forum | JoomShaper
Staff replied SP Page Builder

Accordion Accessibility

Asked by Alex Block 5 years ago Last activity 1 year ago

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.

5 replies

Al Mamun Staff

Hi,

Can you please indicate the page where accordion is exist. Send me the URL.

Thanks,
Mamun

Paul Frankowski Senior Staff

Hi,
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

MandyO

Hello, is there any news here? It still doesn't work for me. Thanks.

Paul Frankowski Senior Staff
1 year ago · edited

If 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.

Log in to reply.