6.4: Accordions
Accordion widgets can come in single or multi-select formats, in which one or multiple panels can be opened at once, respectively. They are typically used to reduce the space that content occupies and to reduce scrolling. Accordions are made up of Accordion Headers and Accordion Panels. The accordion headers control the display of their associated accordion panel.
The WAI-ARIA roles, states, and properties used in an accordion
- aria-multiselectable =”(true | false)”
- role=”heading”
- role=”button”
- aria-controls=”[panel id]”
- tabindex=”0″
- role=”region”
- aria-hidden= “(true | false)”
- aria-expanded= “(true | false)”
The following JSFiddle presents a typical accordion widget. Review the JavaScript and HTML markup. Test the accordion presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking “Edit in JSFiddle”, copying the accessibility/WAI-ARIA code described below to fix the accessibility of the accordion before completing Activity 9 on the page that follows.
First, add the accordion to the landmarked regions by assigning
role="region"
to the opening
<DL>
element when the accordion is initialized, adding the region role to the
init()
function.
Next, add the
aria-multiselectable
attribute to the
<DL>
, which will be dynamically set to true or false based on plugin configuration settings. This lets a user know that more than one accordion panel can be opened when set to TRUE or only a single panel when set to FALSE. Refer to the
$(document).ready
block in the HTML, where the assignment takes place.
The semantics of the children of the
<DL>
element, which was assigned
role="presentation"
, will also have their definition list semantics removed. Add the accordion semantics
role="heading"
to assign a heading role to the
<DT>
elements. The
aria-level
attribute might be used to implement nested accordion panels, but for our purpose here a simplified version is sufficient.
Add a
<div>
inside the header (i.e.,
DT
) and define its
role
as a button. The button is given an
aria-controls
attribute to define which of the accordion panels it controls. By default the toggle state is set to false with
aria-expanded="false"
to be updated dynamically when the button is clicked or key pressed. Finally add
tabindex="0"
to the button (
<div>
) to make it keyboard focusable.
The tabindex will make the button focusable, but it will not make it clickable. The
.on()
jQuery function adds a click event to the button, but a keypress event must also be added. Adding
.on('keydown')
activates the
onKeyDown
function, defined below, so the accordion headers operate with both a mouse click and a keypress.
In the
togglePanel()
function, before
autoCollapse()
, add in the toggle to add and update the
aria-expanded
attribute for the panel headers, based on whether the associated panel is visible or not.
Within the
autoCollapse()
function, toggle
aria-expanded="false"
and
aria-hidden="true"
for all accordion tabs that are not the current one. This ensures only one panel is open at a time.
Finally, the accordion panel semantics are added, defining the
<DD>
elements that had its semantics removed when
role="presentation"
was added to the parent
<DL>
. Panels are given a generic
role="region"
to make the panel browsable in the landmarks list, set to be hidden by default with
aria-hidden="true"
so all panels are closed when the page loads. Further,
tabindex="0"
is also added to make the panels keyboard focusable so the content of the panel is read as the user navigates to them.
Adding Keyboard Operability
WAI-ARIA best practices defines all recommended accordion keyboard functionality, listed below. In our example, only the required keyboard events are included.
Keyboard Interaction for Accordions
-
Enter or Space:
- When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
- When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so they do not support a collapse function.
- Down Arrow (Optional): If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
- Up Arrow (Optional): If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
- Home (Optional): When focus is on an accordion header, moves focus to the first accordion header.
- End (Optional): When focus is on an accordion header, moves focus to the last accordion header.
- Ctrl+Page Down (Optional): If focus is inside an accordion panel or on an accordion header, moves focus to the next accordion header. If focus is in the last accordion header or panel, either does nothing or moves focus to the first accordion header.
- Ctrl+Page Up (Optional): If focus is inside an accordion panel, moves focus to the header for that panel. If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
Source: WAI-ARIA Accordion Design Patterns
The following
onKeyDown
function has been created to add keyboard operability to the header elements of the accordion, allowing both Space bar and Enter keys to operate the toggles (i.e., headers) that open and close panels, and the Arrow keys to move between the accordion headers. By default, users can navigate between headers, and between headers and panels using the Tab key.
Accessible Accordion in Action
Watch the following video to see how ChromeVox interacts with an accordion. The Tab key is used to navigate into the accordions, move between accordion headers, and move between accordion headers and panels. Arrow keys can also be used to move between accordion headers, but not from headers to an associated panel. Aim to have the accordion you update in the activity on the following page operate and announce like the one in the video.
Video: Accessible Accordions