Picture of Rob Mausser
Accordion "buttons"
by Rob Mausser - Thursday, 30 May 2019, 1:38 AM

A client believes that the accordion component does not meet WCAG 2.0 AA. 


Here's what they say:

"By using HTML "button" elements it is misleading once expanded to the user what the floating paragraphs of text are. Perhaps the <details>/<summary> HTML5 elements would be a better use for the expand and collapse feature currently implemented. "


I'm wondering what anyone's opinion is on this?

Picture of Matt Leathes
Re: Accordion "buttons"
by Matt Leathes - Thursday, 30 May 2019, 9:24 AM

Is this the same client that requires IE8 support suggesting that you use HTML5-only elements.. that aren't supported by IE8?

If it is the same client then they are commenting on a version of Adapt that is now quite out of date. If you need the best accessibility support from Adapt you should be using the latest version (currently v4.2.0)

Regardless, I would say that this is the client's opinion rather than an objective fact that the accordion component is not WCAG 2 AA compliant.

I would also draw their attention to this example on the WAI-ARIA best practices site showing an accordion that uses a button... possibly there's a case to be made there for adding an aria-controls attribute to the button to make explicit that it is linked to the <div> containing the text. I'll do some investigation on that front, but typically there are many of these new ARIA features that don't currently have any tangible impact on the behaviour of assistive technology so the value of including them is often questionable...

Picture of Rob Mausser
Re: Accordion "buttons"
by Rob Mausser - Thursday, 30 May 2019, 7:56 PM

Yes its the same client. 

thanks for the feedback.

And while I agree the legacy version isnt as good, I dont see a change in v4; its still an accordion with a button.

But youve given resources to prove this is OK.


Picture of Matt Leathes
Re: Accordion "buttons"
by Matt Leathes - Thursday, 30 May 2019, 8:11 PM

Oh, I meant for the best all-round accessibility experience - and one that we're actually developing whereas we really only do critical bug fixes on the legacy branch now.

Looks like adding aria-controls wouldn't really improve the experience for a screen reader user https://www.heydonworks.com/article/aria-controls-is-poop