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