Accessible Expanding/Collapsing Sections

This is a demonstration of how to make expanding/collapsing content accessible to screen-reader users. Each section is comprised of a trigger element and associated content pane. When a trigger is clicked, its following sibling is toggled (unhidden/hidden). Note that this differs from an accordion because any or all of the sections may be shown or hidden simultaneously. An accordion insures that at most one section is opened at a time.

Screen reader users find it helpful to know if a section is expanded/collapsed. A sighted user can see this easily, but since the screen reader user's "focus" only encompasses the element currently being read (the current trigger for instance), it makes life easier if we include a "state indicator" on the trigger. There are several ways to do this.

One problem remains: how to signal that the trigger's state has changed. NVDA handles this properly in both browsers - no extra code is needed; it simply announces the state of aria-expanded when it changes. Jaws does not do this in either browser unless the role of the triggering element is button.

If the content of the expanded sections is strictly text, one might choose to include live region markup on the parent div (here the one surrounding all triggers and content panes). Click the checkbox next to this paragraph to turn on this behavior. This will cause the text to speak each time a section is opened. This might be the right thing to do in an FAQ or something similar. Generally if the section contains only text (i.e. no form controls or images) and is reasonably short, there may be an advantage to having it read immediately. For more complex content however, we feel that simply notifying the user that it has opened and allowing them to decide how to interact with it is the correct approach.

Note that aria attributes do not in any way affect behavior; they simply cause the screen reader to generate announcements based on their value and the role of the element to which they are attached.

Users can press the Tab key to move from one expanding/collapsing link to the next, but because some sections contain hyperlinks, these links will receive focus as well. In a section that contains many hyperlinks, this would force users to tab through all the links as they seek the control to activate the next expanding section. For convenience, therefore, each expand/collapse link is also wrapped in a heading so that screen-reader users can move from one control to the next by simply pressing the heading shortcut key (e.g., JAWS and NVDA users can press the h key; VoiceOver users can press control+option+command+h). This makes it much easier for users to find and operate each expand/collapse control without having to wade through groups of links within each section.

To see this solution in action, use the keyboard or a mouse to select the following three links. View the source code to see how these examples were constructed.

 collapsed link with image