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 KZbin and subscribe to our channel and newsletter (viewsource.fm/...) to hear about episodes (and more) first!
Coding inclusive collapsible sections - inclusive-comp...
ARIA Guide to Accordions - www.w3.org/WAI...
Exploring what a React component is - • What is a React Component
Using React on the WordPress frontend - • Getting started with R...
Brian's website - www.briancoord...
Aurooba's website - 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

[@Nomad_Skateboarding]

The 'viral' tital for the show: "All the javascript in the world won't save you!" Really enjoyed the discussion on accessibility in general, and the technical sides you speak about in particular.

[@user-xg7lf4en7c]

I think something missing from a lot of Accessibility videos is actually using the page/component with a screen reader. I think this is a crucial part of building accessible components. I often do integration accessibility tests for work and it becomes clear that developers never tried using the component with a screen reader. Understanding how users that use screen readers use sites and components is really important. It's another level of learning that a lot of developers and designers don't want to deal with. Then they have an accessibility audit and get 200 issues noting that the site/component doesn't work well with a screen reader. Sometimes shrugging the issues off noting "I used semantic markup, aria-roles and it passes our required static analysis test". Semantic markup, correct aria-roles and static-analysis tools get you a lot of the way there. But using a screen reader (preferably unsighted) to navigate your site with landmarks, headings, lists, and other modes will help make it clear when certain any of those elements and aria-roles are lacking. Beyond just making sure your site is WCAG X.X AAAA compliant, it will also help you understand if it actually offers a good experience for the user.

[@viewsourcefm]

That's a great idea! We'll keep it in mind for another episode.

[@marklabbett8308]

Can you share the code for the collapse feature?

[@viewsourcefm]

In this episode, we were using React, so actually just removing it from the DOM completely: github.com/viewSourcePodcast/viewSource-blocks/blob/add/accordion-block-a11y/src/accordion/app.js In a recent talk at WP Accessibility Day, we did present an alternate version of the accordion, with the collapse script here: github.com/bacoords/a11y-day-accordion-block/blob/main/src/accordion-block/view.js The video of that talk has not been published as of this writing, but should eventually show up on KZbin: kzbin.info/door/es9XCUZd51CAigbBEGlfNgfeatured?view_as=subscriber

[@devinegger4570]

I'm curious: Are the aria-controls and aria-expanded properties enough to let a screen reader user know what's going on here? Would they know upon focusing on the heading with button that by "clicking" the button it expands more information about the heading? 🤔 Also, you had me yelling at the TV like a little kid about the "#" in aria-labelledby!!! So fun! 😂

[@viewsourcefm]

ahahaha when Brian pointed out the hashtag to me I was like OMG HOW DID I MISS THAT. - Aurooba

[@viewsourcefm]

When I tested it with the VoiceOver utility, it tells you that the button is attached to something that is "collapsed", which is maybe not the most verbose indication, but it IS there, and I didn't see any other guidelines on how to make it more verbose. But I'd be interested in hearing what you think! - Aurooba

[@viewsourcefm]

I'm so glad I INTENTIONALLY put that INTENTIONAL error in my code. Did I mention it was INTENTIONAL and not a mistake? -B

[@gianbattistamaricosu1911]

would be more more more and more usefull with a tab system