The Accordion component has been designed keeping in mind the WAI-ARIA specifications, by applying the prompt WAI-ARIA roles, states and properties along with the keyboard support. Thus, making it usable for people who use assistive WAI-ARIA Accessibility supports that is achieved through the attributes like aria-multiselectable, aria-disabled, aria-expanded, aria-selected and aria-hidden.
It helps to provides information about the elements in a document for assistive technology.
The component implements the keyboard navigation support by following the
WAI-ARIA practices and tested in major screen readers.
| Property | Functionality |
|---|---|
| role | presentation: It indicates that the element is used to control presentation. This attribute is added to the Accordion element describing the actual role of the element. heading: It identifies the element as a heading that serves as an Accordion header. This attribute is added to all the Accordion header elements describing the actual role of the element. |
| aria-multiselectable | It indicates the expand mode in the Accordion. Default value of this attribute is true. If expand mode value is changed as ‘single’, the attribute value changes to false. |
| aria-disabled | It indicates the disabled state of the Accordion and its items. |
| aria-expanded | It indicates the expand state of the Accordion Item. Default value of this attribute is false. If an item is expanded, the attribute value changes to ‘true’. |
| aria-selected | It indicates the Selection state of the Accordion Item. Default value of this attribute is false. If an item is expanded, the attribute value changes to ‘true’. |
| aria-hidden | It indicates the content visible state of the Accordion Item. Default value of this attribute is true. If an item content is visible, the attribute value changes to ‘false`. |
| aria-labelledby | Attribute is set to content (panel) and it points to the corresponding Accordion header. |
| aria-controls | Attribute is set to the header and it points to the corresponding Accordion content. |
| aria-level | It defines the hierarchical level of an Accordion element with its inner level. |
Keyboard navigation is enabled by default. Possible keys are:
| Key | Description |
|---|---|
| Space or Enter | When focus is on the Accordion header, click on the focused element makes the element to expand and collapse. |
| Down Arrow | Focus the next Accordion header. |
| Up Arrow | Focus the previous Accordion header. |
| Home | Focus the first Accordion header. |
| End | Focus the last Accordion header. |