Accordion items not registering as keyboard accessible elements

[urbi]

Hi, we’re creating a page for a client who needs us to meet web accessibility guidelines (WCAG 2.0 AA). We have an accordion list included on our page and it is being flagged by accessibility audits with the following warning:

“Interactive elements must be able to be activated using a keyboard”

On closer inspection, the accordion items are completely ignored by keyboard navigation, can you tell me how to prevent this from happening?

[jade]

Hello Amy,

The v2 accordion element is actually accessible using the keyboard. If you get the focus to the accordion items and hit enter, the accordions open and close accordingly. The only thing is that the tool you are using to check for accessibility looks for the aria data but does not actually check if the page element is actually accessible.

Also, the accordion element already has some aria data at present:

In case you know what kind of information the tool you are using is looking for so that the element will detect is as accessible, kindly let us know so that we can look into it further.

Thank you.

[urbi]

Hi Jade, when we attempt to navigate using the keyboard, the focus skips past the accordion section into the following area… it doesn’t look keyboard navigable as things stand.

Could you point me to a working keyboard accessible accordion somewhere online, so I can rule out theme.co as a potential cause?

Thanks!

[christian]

Hey Amy,

I just tested the Accordion element and it’s keyboard accessible like what Jade said. Please watch the screencast below.

Please give us the name and version of the device, operating system and browser you’re using and we’ll try to replicate the issue if we could procure the exact device. Also, provide the URL of the page with the Accordion element.

Regarding your other question, I’m sorry but we don’t have recommendations for other accordions.

Thanks.