A11Y 101: Accordions

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
No comments yet. Be the first to comment.
In this series I'll explore the basics of accessibility and you can join me on this learning trip.
I'll be honest with you, I've made this mistake we will look at in this article many times before. The mistake we are talking about is content flow. In simple terms, which direction does your content flow in? When we write our code, there is some sem...
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Regarding accessibility, you'll always hear the following sentence: Semantic HTML always wins.
Accordions are sections of content grouped by headers. The user can then collapse or close these sections to show/hide more information.

Regarding these accordions, this might be the one exception to the semantic HTML rule.
But, this is a bit controversial.
In HTML5, we were introduced to the details & summary elements, which is precisely this!
However, they didn't have full support, so many people would argue that a custom setup is still the way to go.
As I write this, the browser support is still lacking on IE11, older Edge, and Opera mini.
Lacking, meaning they don't support the toggle and will fall back to showing the whole content piece.
To set up the details & summary setup, we can use the following markup.
<details>
<summary>Introduction</summary>
<p>The text inside this will be shown on click.</p>
<p>You can even add multiple lines in here.</p>
</details>
The code snippet above will render a native toggle.

Then I tested the code on IE11, which is unsupported, and we got the following result.

We should use the semantic HTML as intended. If we show these elements as open to older browsers, that is the way it is.
They work perfectly fine on modern browsers and act as expected.
The cool part about using the semantics is that they evolve. They will get better and more advanced support.
As mentioned, the semantic elements support screen readers and other use-cases perfectly. The summary element is handled as a button and can be toggled using the enter or space keys.
It also indexes nicely in the rotor from our screen reader.
And those using older technology get to see the entire content. And that's perfectly fine.
Are you looking to try it out?
Use the following CodePen to see how it works.
The old ways of creating accessible accordions always relied on introducing some JavaScript to handle states.
In this version, we can ship it with 0 JavaScript, which is another win for semantic HTML.
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter