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.
Figure: Accordion completely closed and accordion with an open area
No.PropertyDescriptionClassificationReference
827ContrastThe labeling of the areas must have a contrast of at least 4.5:1.MustEN 301 549: 9.1.4.3, 11.1.4.3
828ContrastThe visual indicator in the respective labeling of an accordion area which refers to the status of the area (open or closed) must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 11.1.4.1; EN 301 549: 11.1.4.11
829ContrastIf the areas and the area labels are only identifiable as such on the basis of their color design, these colors must have a contrast ratio of at least 3:1 with respect to the neighboring colors.

Note 1: The areas and area labels can be identifiable as such, for example, due to their borders or background colors.

Note 2: The requirement does not apply if the areas and area labels are clearly identifiable as such, due to their position and spacing, for example.

ShouldEN 301 549: 9.1.4.11, 11.1.4.11
830LabelThe label of the areas must be expressive (see LabelFocus indicator
No.PropertyDescriptionClassificationReference
832Use of the keyboardIt must be possible to access, operate and exit the accordion with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
833Use of the keyboardThe hidden areas and their contents must not receive keyboard focus.MustEN 301 549: 9.1.3.1, 11.1.3.1
834UpdatesWhen focusing and operating the accordion, no unexpected change of context

Use of the keyboard: accordion

Permalink "Use of the keyboard: accordion"
ActionKeyClassification
Focusing of the area labelsTABRequired
Exiting the area labelsTAB

Note: If the corresponding area is closed, the next area label is focused using the TAB key. Otherwise, the focus is placed in the area.

Required
Operation of the area labels (opening
and/or closing the area)ENTER, SPACERequired
Navigating between the area labelsUP/DOWN ARROWRecommended
Quick navigation between the area labelsPOS1, ENDRecommended

Use of the pointing device: accordion

Permalink "Use of the pointing device: accordion"
ActionKeyClassification
Operation of the area labels (opening and/or closing the area)Left clickRequired
No.PropertyDescriptionClassificationReference
838RoleFor the area labeling, the button role must be communicated to the Accessibility API (siehe Accessibility APIElement status

Practical tip: accordion in Web applications

Permalink "Practical tip: accordion in Web applications"

Screen reader output for the accordion buttons for showing and hiding the areas

Permalink "Screen reader output for the accordion buttons for showing and hiding the areas"
  • 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

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