Accessible progressive disclosure

Over on The Session I have a few instances of a progressive disclosure pattern. It’s just your basic show/hide toggle: click on a button; see some more content. For example, there’s a “download” button for every tune that displays options to download the tune in different formats (ABC and midi).

To begin with, I was using the :checked pseudo-class pattern that Charlotte has documented so well. I really like that pattern. It feels nice and straightforward. But then I got some feedback from someone using the site:

the link for midi files is no longer coming up on the tune pages. I am blind so I rely on the midi’s when finding tunes for my students.

I wrote back saying the link to download midi files was revealed by the “download” option. The response:

Excellent. I have it now, I was just looking for the midi button which wasn’t there. the actual download button doesn’t read as a button under each version of the tune but now I know it’s there I know what I am doing. I am using the JAWS screen reader.

This was just one person …one person who took the time to write to me. What about other screen reader users?

I dabbled around with adding role="button" to the checkbox or the label, but that felt really icky (contradicting the inherent role of those elements) and it didn’t seem to make much difference anyway.

I decided to refactor the progressive disclosure to use JavaScript instead just CSS. I wanted to make sure that accessibility was built into the functionality, rather than just bolted on. That’s why code I’ve written doesn’t rely on the buttons having a particular class value; instead the buttons must have an aria-controls attribute that associates the button with the element it toggles (in much the same way that a for attribute associates a label with a form field).

Here’s the logic:

1. Find any elements that have an aria-controls attribute (these should be buttons).
2. Grab the value of that aria-controls attribute (an ID).
3. Hide the element with that ID by applying aria-hidden="true" and make that element focusable by adding tabindex="-1".
4. Set aria-expanded="false" on the associated button (this attribute can be a bit confusing—it doesn’t mean that this element is not expanded; it means the element it controls is not expanded).
5. Listen for click events on those buttons.
6. Toggle the aria-hidden and aria-expanded when there’s a click event.
7. When aria-hidden is set to false on an element (thereby revealing it), focus that element.

You can see it action on CodePen.

I’m still playing around with this. I think the :focus styles are probably far too subtle right now—see this excellent presentation from Laura Palmaro for more on that. I’m also not sure if the revealed content should automatically take focus. I’ll see if I can get some feedback from people on The Session using screen readers—there’s quite a few of them.

Feel free to use my code but you might want to check out Jason’s code to do the same thing—his is bound to be nicer to work with.

Update: In response to this discussion, I’ve decided not to automatically focus the expanded content.

The Web Accessibility Cookbook

Manu’s book is available to pre-order now. I’ve had a sneak peek and I highly recommend it!

You’ll learn how to build common patterns written accessibly in HTML, CSS, and JavaScript. You’ll also start to understand how good and bad practices affect people, especially those with disabilities.

Home - Sa11y

Another handy accessibility testing tool that can be used as a bookmarklet.

Write Alt Text Like You’re Talking To A Friend – Cloud Four

This is good advice:

Write alternative text as if you’re describing the image to a friend.

The Folly of Chasing Demographics - YouTube

I just attended this talk from Heydon at axe-con and it was great! Of course it was highly amusing, but he also makes a profound and fundamental point about how we should be going about working on the web.

Cameron Dutro on ruby.social

Here’s the inside scoop on why Github is making a bizarre move from working web components to a legacy React stack.

Most of what I heard in favor of React was a) it’s got a good DX, b) it’s easy to hire for, and c) we only want to use it for a couple of features, not the entire website.

It’s all depressingly familiar, but it’s very weird to come across this kind of outdated thinking in 2023.

My personal prediction is that, eventually, the company (and many other companies) will realize how bad React is for most things, and abandon it. I guess we’ll see.