Accordion

See also : Button , tabs , carousel

An accordion combines several areas which are arranged one beneath the other and which can be shown and hidden using buttons. In this respect, the labeling of the areas is visible at all times (see DIN EN ISO 9241-161: 8.1). The label usually has a visual indicator which refers to the status of the area (shown or hidden). For an accordion, different implementation variants are possible with respect to the minimum or maximum number of open areas, e.g.

• Initially, all the areas are closed and only one area can be opened at a time. If an area is opened, the previously opened area is automatically closed.
• At least one area is open at all times, and all areas can be opened.

Label). | Must | EN 301 549 9.2.4.6, 11.2.4.6 | | @!831 | Focus visibility | If the area label receives the keyboard focus, the focus indicator must be visible (see

Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 |

change of context may occure. | Must | EN 301 549: 9.3.2.1, 11.3.2.1 | | @!835 | Updates | When operating the buttons for showing and hiding the areas, no loss of focus loss may occur.

Note: The focus must remain on the button or be placed at the beginning of the shown area.

Accessibility API). | Must| EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!839 | Desktop: Element hierarchie | The parent / child relationships of the elements within the accordion must be communicated to the Accessibility API. | Must | EN 301 549: 11.5.2.9 | | @!840 | Status | The status of the area labels must be communicated to the Accessibility API (see

Element status).

Note: This also applies to the „open“ or „closed“ status.

• JAWS: [Label] Button [reduced | expanded] [note on operation with the Enter key]
• NVDA: [Label] button [reduced | expanded]
• Windows narrator: [Label] button [hidden | expanded]

Note: When using the <details>-element without a label, the beginning and end of the page area are not perceptible with assistive technology. If the <details>-element is explicitly labeled (by )aria-label or aria-labelledby) the area is output as „group“ (JAWS) or „grouping“ (NVDA). Die Windows Narrator does not output labeled groups either.

There is no element for accordions in HTML. Instead, several areas can be used which are shown and hidden using buttons. The areas are marked with <details> and the buttons with <summary>. The <summary> element is the first child element within <details>. The labels of the buttons are derived from the text content in the <summary> element. The initial state of the area (opened or closed) is set with the open attribute.

To make the coherence of the areas and buttons perceptible with assistive technology, they can be nested in a labeled group.

According to the HTML specification, the <summary> element may contain links, headings, input fields and many other elements – it is important to remember, however, that all the elements which are located within <summary> are imperceptible and cannot be operated with the screen reader, as the <summary> element is communicated to the Accessibility API as a button. Therefore, the <summary> element should only contain a concise and expressive label in text form.

Further information: 4.11.1 The details element - HTML Standard (whatwg.org) (External Link), 4.11.2 The summary element - HTML Standard (whatwg.org) (External Link)

There is no role for accordions in ARIA. Instead, several areas can be used which are shown and hidden using Button . In this respect, the following should be taken into account:

• The buttons that have the purpose of showing and hiding areas should be marked with the aria-expanded attribute. aria-controls can be used to make reference to the ID of the area that is shown or hidden.
• The labeling of the buttons should take place using text content or aria-labelledby.
• To make the coherence of the areas and buttons perceptible with assistive technology, they can be nested in a labeled group .
• The presentation of the accordion should be verified in Windows High Contrast mode. The areas should therefore have a border.
• The visible button and the programmatically focused element should have the same position and size.

Alternatively, a tab group can be used instead of an accordion.

Further information: aria-expanded state - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Accordion Pattern (Sections With Show/Hide Functionality) | APG | WAI | W3C

Information about this article

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!