5. Interactive WAI-ARIA (Intermediate)
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)”
- aria-controls=”[panel id]”
- aria-hidden= “(true | false)”
- aria-expanded= “(true | false)”
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
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.
<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.
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.
autoCollapse() function, toggle
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.
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