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 (a link or a button) and associated content pane. When a trigger is clicked, its sibling is toggled (i.e., text is revealed or hidden). Note that an expanding section differs from an accordion because any or all of the sections may be shown or hidden simultaneously. An accordion, on the other hand, reveals only one section at a time.

While sighted users can easily tell if an expanding section is open or closed, screen-reader users need to be alerted when a section's state has changed. This can be accomplished using various states and properties found in ARIA 1.0. ARIA markup affects how assistive technology (such as screen readers) conveys information to users. It has no visual effect on the Web page.

In the examples below, press the Tab key to move from one expanding/collapsing link to the next. Selecting a link or button will reveal text; pressing the link or button again will hide the text. If a revealed section of text contains hyperlinks, these links will receive keyboard focus as well. In order to avoid forcing users tab through all of these links in order to activate the next expanding section, each link or button is also wrapped in a heading so that screen-reader users can move from one control to the next by simply pressing a 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 locate and operate each expand/collapse control.

If the content of an expanded section is simply text, it is best to add live-region markup (i.e., aria-live) to the parent div (the div that contains all triggers and content panes) to force screen readers to begin reading the text when it is revealed. To see how this works with a screen reader running, select the checkbox below. On the other hand, if the expanding section contains complex or lengthy content, simply notifying the user that the content has been revealed (but not using live-region markup to force the screen reader to immediately read this content) would be a better approach.

Use the keyboard or a mouse to select any of the following links or buttons. View the source code to see how these examples were constructed.

collapsedText link with an associated image