The Accordion React Carbon Component has been tested against the latest W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level A and AA success criteria and violations have been identified as high priority issues. This document will be updated when these accessibility issues are resolved.
The Accordion Carbon Component provides a vertically stacked layout for web content, commonly used to reduce scrolling. The accordion header is a button that is used to expand and collapse each accordion panel. Buttons are used so that the accordions are tab-able by keyboard users and accessible to screen readers. Tab key and Shift-Tab keys are used to navigate through each accordion header and all focusable elements in the accordion should be included in the page Tab sequence. The Enter or Space key expand and collapse each accordion panel. WAI-ARIA roles and states are used to ensure the component is accessible to people using assistive technologies. The accordion component is assigned the ARIA role="presentation" because it is used to layout web content. When an accordion panel is collapsed the content is hidden so the ARIA state, aria-expanded="false" advises users of assistive technologies that the accordion panel is not visible. When the accordion header is expanded the ARIA state changes to aria-expanded="true" and the accordion panel content is displayed. Each accordion header contains an ARIA label, and the header buttons have a aria-control property set that points to the unique id of the panel it controls. When focus is on the Accordion header there is a prominent style change to the border as well as background of the accordion header.
This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.
Helpful Resources for Creating Customized Accessible Implementations