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?
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.
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:
- Find any elements that have an
aria-controlsattribute (these should be buttons).
- Grab the value of that
aria-controlsattribute (an ID).
- Hide the element with that ID by applying
aria-hidden="true"and make that element focusable by adding
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).
- Listen for click events on those buttons.
- Toggle the
aria-expandedwhen there’s a click event.
aria-hiddenis set to
falseon 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.
Update: In response to this discussion, I’ve decided not to automatically focus the expanded content.
“Accessible progressive disclosure” adactio.com/journal/10365
@adactio …which makes me see that I don’t need to go too JS-deep for this.