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.

Have you published a response to this? :

Responses

Kevin Marks

Isn’t this a place where details/summary would be ideal (with a polyfill for browsers without it) or do screen readers not understand that either?

Kartik Prabhu

Made a link-aware progressive disclosure javascript https://gist.github.com/kartikprabhu/45528a06915ac2d92b1ec83084b31b84 It is adapted from the one by @adactio ( https://adactio.com/journal/10365 ), but added a few things so that if the URL links to a part of the page that can be hidden (using a fragment or fragmention) then that content is not hidden by default. Compare https://kartikprabhu.com/papers vs https://kartikprabhu.com/papers#coframes%20at%20fixed%20connection I had to change a few things in fragmention.js for this to work though https://github.com/kartikprabhu/fragmentions/commit/30e8f7633fcafdf68370aeb525760609b4f22849

29 Likes

# Liked by Marc Drummond on Saturday, March 12th, 2016 at 12:14am

# Liked by Front-End Front on Sunday, March 13th, 2016 at 7:28pm

# Liked by David Moulton on Tuesday, May 3rd, 2016 at 11:01am

# Liked by Rachel Andrew on Tuesday, May 3rd, 2016 at 11:02am

# Liked by Sara Soueidan on Tuesday, May 3rd, 2016 at 11:36am

# Liked by Brett Jankord on Tuesday, May 3rd, 2016 at 11:37am

# Liked by Pim Derks on Tuesday, May 3rd, 2016 at 11:38am

# Liked by Ines Teles on Tuesday, May 3rd, 2016 at 11:38am

# Liked by 황규연 / Kyooyeon Hwang on Tuesday, May 3rd, 2016 at 12:07pm

# Liked by Melissa Em on Tuesday, May 3rd, 2016 at 12:08pm

# Liked by Liam Coates on Tuesday, May 3rd, 2016 at 12:08pm

# Liked by Heath Flohre on Tuesday, May 3rd, 2016 at 12:35pm

# Liked by Johanna Bates on Tuesday, May 3rd, 2016 at 1:01pm

# Liked by Mizan :) on Tuesday, May 3rd, 2016 at 1:01pm

# Liked by Brian Reeves on Tuesday, May 3rd, 2016 at 1:01pm

# Liked by Christopher Janzen on Tuesday, May 3rd, 2016 at 1:36pm

# Liked by Jeremias Menichelli on Tuesday, May 3rd, 2016 at 1:36pm

# Liked by Chris Cid on Tuesday, May 3rd, 2016 at 1:36pm

# Liked by Monika Spielman on Tuesday, May 3rd, 2016 at 2:08pm

# Liked by Mina Markham on Tuesday, May 3rd, 2016 at 2:09pm

# Liked by Jem Bijoux on Tuesday, May 3rd, 2016 at 2:44pm

# Liked by Henrik Ammer on Tuesday, May 3rd, 2016 at 2:44pm

# Liked by jerbi ahmed [Ξ] on Tuesday, May 3rd, 2016 at 4:20pm

# Liked by roycifer on Tuesday, May 3rd, 2016 at 4:45pm

# Liked by Beau Davis on Tuesday, May 3rd, 2016 at 5:18pm

# Liked by derheap on Tuesday, May 3rd, 2016 at 6:44pm

# Liked by Fred Carlsen on Tuesday, May 3rd, 2016 at 10:48pm

# Liked by Michael Lecke on Wednesday, May 4th, 2016 at 1:55am

# Liked by Mike Cheshire on Wednesday, May 4th, 2016 at 9:43am