Accessible progressive disclosure revisited

I wrote a little while back about making an accessible progressive disclosure pattern. It’s very basic—just a few ARIA properties and a bit of JavaScript sprinkled onto some basic HTML. The HTML contains a button element that toggles the aria-hidden property on a chunk of markup.

Earlier this week I had a chance to hang out with accessibility experts Derek Featherstone and Devon Persing so I took the opportunity to pepper them with questions about this pattern. My main question was “Should I automatically focus the toggled content?”

Derek’s response was very perceptive. He wanted to know why I was using a button. Good question. When you think about it, what I’m doing is pointing from one element to another. On the web, we point with links.

There are no hard’n’fast rules about this kind of thing, but as Derek put it, it helps to think about whether the action involves controlling something (use a button) or taking the user somewhere (use a link). At first glance, the progressive disclosure pattern seems to be about controlling something—toggling the appearance of another element. But if I’m questioning whether to automatically focus that element, then really I’m asking whether I want to take the user to that place in the document—in other words, linking to it.

I decided to update the markup. Here’s what I had before:

<button aria-controls="content">Reveal</button>
<div id="content"></div>

Here’s what I have now:

<a href="#content" aria-controls="content">Reveal</a>
<div id="content"></div>

The logic in the JavaScript remains exactly the same:

  1. Find any elements that have an aria-controls attribute (these were buttons, now they’re links).
  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 link (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 links.
  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 in action on CodePen.

See the Pen Accessible toggle (link) by Jeremy Keith (@adactio) on CodePen.

Have you published a response to this? :

Responses

27 Likes

# 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