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 (https://viewsource.fm/subscribe) to hear about episodes (and more) first!
Coding inclusive collapsible sections – https://inclusive-components.design/c...
ARIA Guide to Accordions – https://www.w3.org/WAI/ARIA/apg/patte...
Exploring what a React component is – • What is a React Component
Using React on the WordPress frontend – • Getting started with React inside Wor...
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
00:00:00 Introduction
00:00:15 The importance of accessibility
00:03:25 The different considerations of making something accessible
00:05:35 Recapping where are are in the Accordion Block series
00:06:50 Demo-ing an accessible accordion
00:08:36 Defining an accordion
00:10:40 Header versus heading
00:12:21 Keyboard accessibility
00:15:32 What does ARIA stand for?
00:16:03 Coding an accessible accordion
00:16:43 The components of an accordion section
00:17:23 Diving into the semantics of an accordion section header
00:23:11 Targetting ARIA tags in your CSS
00:24:21 Digging into the accordion section panel
00:26:32 Animating an accordion
00:27:46 Next Steps
00:29:34 Conclusion
