How to build an accessible accordion: easy HTML enhancements for improved keyboard support

[@blokche_dev]

Great to see some content taking accessibility into account. I would not add the "toggle" at the start of the name of the button however. For users using speech recognition software, it may be difficult to find buttons by their name I think. It needs test, for sure! Oh! and you will be able to use the details element with the same name attribute soon enough to create exclusive accordeons :)

[@CSSdeCoder]

@@blokche_dev that's a great point and something I forgot to mention in the video is that usability testing is a huge part of building for a11y. Thanks for the suggestion!

[@clevermissfox]

Love the a11y content ! Would be great to see it built properly from the start , not with everything as divs and then adding roles as needed. When following the recommended pattern on the aria authoring practices guide, I get so confused why it says not to use in production environments. I have seen another pattern since you mentioned JavaScript not loading, where they make the heading and use a link instead of a button that’s set to the panel on question; in case the JavaScript doesn’t load. But then they have to either replace the with a button on the DOM or I guess give the a role of button ? But at least the content is accessible if the JavaScript doesn’t load , it’s not hidden away and it’s still linked to as well as arja-labelledby the heading piece. Luckily we will have support to customize and animate the details/summary soonish!!! Fun to play with on chrome in the meantime !

[@CSSdeCoder]

Hi @@clevermissfox ! I went back and forth about building an accessible accordion from the start. I work with a legacy codebase where I can't always alter the HTML. I thought it would be more beneficial to document the process of adding enhancements since many people may be in a similar situation. Plus there are already tons of tutorials on how to use the details and summary elements. Anytime you add aria, you should be testing for usability. That was something I didn't mention in the video, and the reason why the APG patterns are only suggestions. They assume you will be testing for usability and therefore may find a better pattern based on your testing. The APG is a great place to start, but ultimately the results of your testing will always be the deciding factor. Thanks for watching!

[@SethMitchell-b6m]

Very very cool content. Something people have ignored for too long. Great job!

[@CSSdeCoder]

Thanks! I'm hoping to bring more attention to accessibility.