ARIA Accordion documented

From Level Access Web Labs
Jump to: navigation, search

This page builds on the "ARIA Accordion" page.
Common uses: accordions have long been used to offer show/hide functionality for FAQ/Help content, to allow sections of long forms to be initially collapsed and expanded when the user is ready to engage, and so on. Summary: each accordion features a heading that encloses a button, which in turn uses aria-expanded and aria-controls; the expanded panel content is contained in an ARIA region that is identified by the button text using aria-labelledby, and is referenced by the button's aria-controls.
Elements and attributes include:

  • heading element (native or ARIA equivalent): supports intuitive screen reader navigation and identifies subordinate content clearly. Heading level should be the same for all, such as h3 (assuming no nested accordions).
  • button (native or ARIA equivalent): keyboard accessible, tab to focus, Enter or Spacebar to activate. Use instead of <a> link element.
  • aria-expanded: added to button, provides the required textual indication of the current state. Set aria-expanded to true when expanded or false when collapsed. Desktop and mobile screen readers generally announce the new state immediately, though this is not always the case. Use aria-expanded instead of older methods such as images or image links whose alternative text identifies either the current state or the proposed action. A visual indication of expanded/collapsed state would need to be added by accessible elements such as <img> or <svg>.
  • aria-controls: explicitly associates the triggering element (button) and expanded panel
  • region role: in container element of exposed/expanded content
  • aria-labelledby: in container element with role="region", its value is the 'id' attribute of the triggering button element


Design includes:

  • Keyboard accessibility: buttons are tabbable, either by use of native elements like button or by adding tabindex=0 if a custom control with role-"button" is used. Both Spacebar and Enter should be supported to toggle the buttons.
  • Focus management: when a button is activated to expand or collapse it, focus should remain on the button so that it can be toggled again by keyboard-only users.
  • Expanded/collapsed state is indicated textually by aria-expanded, but a visual indication of the expanded or collapsed state would need to be added separately, typically by <img> or <svg> elements, but not as CSS background images. If <img> is used, set alt="". If <svg> is used, set aria-hidden="true" and focusable="false". CSS pseudo elements could also be used to perform the visual rendering.
  • Use if ARIA regions to enclose panel content are generally recommended but are not strictly required, and there are implementation options that argue for or against their use.
  • The most typical accordion behavior allows multiple panels to be expanded at a time and also allows all panels to be collapsed. If the valid (though less common) design option is chosen where one (and only one) panel must always be expanded, additional markup would be required, such as adding aria-disabled="true" on the expanded button to indicate that it cannot be toggled/collapsed.


Reference: WAI Description, Keyboard Interaction , States and Properties of Accordion: http://www.w3.org/TR/wai-aria-practices-1.1/#accordion

Accordion annotated

Results

JAWS

JAWS 18 The expanded or collapsed STATE of the buttons is announced when the TAB or ARROW keys are used as expected. When the Button is expanded the region for the button is announced immediately after the button as expected. When the button is collapsed the region is no longer announced as expected.

NVDA

NVDA 2017.2 The expanded or collapsed STATE of the buttons is announced when the TAB or ARROW keys are used as expected. When the Button is expanded the region for the button is announced immediately after the button as expected. When the button is collapsed the region is no longer announced as expected.

iOS

VoiceOver iOS 10.3.2 The expanded or collapsed STATE of the buttons is announced as expected. When the Button is expanded the region for the button is announced immediately after the button as expected. When the button is collapsed the region is no longer announced as expected.