Building an accessible accordion
Aurooba and Brian dig into the semantics of not only what makes an accordion accessible, but also why a11y should be a first class consideration when you build anything on the web. They also explore how different ARIA tags work and what they indicate, taking a previously inaccessible accordion and transforming it into something navigable visually, with a keyboard, and with other assistive devices. Along the way, they also think out loud about the definition of an accordion and what that really means.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first!
- Source code for this episode – https://github.com/viewSourcePodcast/viewSource-blocks/tree/add/accordion-block-a11y
- Coding inclusive collapsible sections – https://inclusive-components.design/collapsible-sections/
- ARIA Guide to Accordions – https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
- Exploring what a React component is : https://youtu.be/eCKyI12JJsw
- Using React on the WordPress frontend : https://youtu.be/TtmY2Ck_6i0
- Brian's website – https://www.briancoords.com
- Aurooba's website – https://aurooba.com
- (00:00) - Introduction
- (00:15) - The importance of accessibility
- (03:25) - The different considerations of making something accessible
- (05:35) - Recapping where are are in the Accordion Block series
- (06:50) - Demo-ing an accessible accordion
- (08:36) - Defining an accordion
- (10:40) - Header versus heading
- (12:21) - Keyboard accessibility
- (15:32) - What does ARIA stand for?
- (16:03) - Coding an accessible accordion
- (16:43) - The components of an accordion section
- (17:23) - Diving into the semantics of an accordion section header
- (23:11) - Targetting ARIA tags in your CSS
- (24:21) - Digging into the accordion section panel
- (26:32) - Animating an accordion
- (27:46) - Next Steps
- (29:34) - Conclusion
Creators and Guests
Host
Aurooba Ahmed
(she/her) Developer building bespoke #WordPress solutions, tools, and blocks. My name is pronounced "oo-ROO-ba" — Default to kindness, folks.
