))
Building an accessible accordion
Manage episode 359777818 series 3440550
Content provided by Aurooba and Brian, Aurooba Ahmed, and Brian Coords. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Aurooba and Brian, Aurooba Ahmed, and Brian Coords or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://player.fm/legal.
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
35 episodes
Share
