DEV Community

Cover image for JavaScript and Accessibility: Accordions

JavaScript and Accessibility: Accordions

Lindsey Kopacz on May 20, 2019

Originally posted on www.a11ywithlindsey.com. When I first wrote my post about JavaScript and Accessibility, I promised I would make it a series. ...
Collapse
 
angeliquejw profile image
Angelique

However, it is my personal preference using classes for styling and not attributes.

One of the wins of using ARIA attributes to style interactive components like this is that the component will never work without the ARIA changes baked in. This may not matter in very small teams or teams where there is across-the-board knowledge about accessibility, but for all other cases, I would highly recommend using the ARIA attributes in the CSS, too.

This was a great post, btw!

Collapse
 
lkopacz profile image
Lindsey Kopacz

True! I just never forget, but I definitely like the idea of forcing people to deal with it 😃

Collapse
 
link2twenty profile image
Andrew Bone

Great post, as always, Lindsey 🙂

Collapse
 
teej profile image
TJ Fogarty

Great post, thanks for sharing! I really like the code snippets that show what's changed.

Collapse
 
lkopacz profile image
Lindsey Kopacz

Really glad it helps you!

Going things step by step to highlight what changes fixes which issues really helps me learn why I am doing the thing 😁

Collapse
 
kienngo profile image
ken

Great material!

Collapse
 
silvestricodes profile image
Jonathan Silvestri

Such a great post! I'm thinking of spinning up an example via a React component and seeing how it can be implemented there :)

Collapse
 
itsjzt profile image
Saurabh Sharma

really nice post, Is using detail element for accordation do any harm for accessibility or it's less used just because of low browser support

Collapse
 
lkopacz profile image
Lindsey Kopacz

Part of accessibility is being robust. In my opinion, this means support of browsers AND assistive devices.

Highly recommend giving this a read! developer.mozilla.org/en-US/docs/W...

Collapse
 
anpos231 profile image
anpos231

If I remember correctly HTML has built in support for accordions natively (without JS!) But I don't remember how, or what tags were used for it. If anyone can find it, I'd be grateful.

Collapse
 
lkopacz profile image
Lindsey Kopacz

It's the <details> tag. It doesn't have full support which is why I went through this, but I included the reference in the "Adding the ARIA attributes" section!

Collapse
 
mzahraei profile image
Ardalan

Prefect