Accordion

A component that allows users to collapse and expand a section of content.

Accessibility

 

Keyboard


Key

Interaction

Enter or Space

Collapses/Expands accordion with header area focused

Tab or Shift-Tab

Navigation between headers

 

Design Checklist


Ref to 23:4917

 

Accessible use of color

Color is not used as the only visual means of conveying information and meets a minimum of Level AA WCAG standards.

Ref to 23:4917

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and 3:1 for large text.

Ref to 23:4917

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1.

Ref to 23:4917

Keyboard interactions

It follows WCAG standards for keyboard accessibility guidelines and includes a description of keyboard interactions.