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