Chapter 11: Accordion

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.

Each header controls it’s associated content. The header also will have a control that can show / hide or expand / collapse the associated section.

Accordions as mentioned can show or hide the content which reduces the need for scrolling the page when multiple sections are on the page. Accordions can either be multi-expandable or single expandable.

Keyboard Navigation

Action Keyboard command
To expand or collapse the content section. Enter / return or space
Tab Move to the next actionable control in the accordion.
Shift + tab Moves to the previous actionable control in the accordion.

 

Note1: To expand or collapse the accordion the focus must be on the accordion header.

Note 2: The actionable controls of the accordion will have to follow the natural page tab sequence.

ARIA Roles, States & Properties

ARIA Attribute Allowed values Explanation
Aria-expanded True or false Applies to all accordion headers. Announces if the accordion item is currently expanded or collapsed
Aria-controls Id value Forms a relation between the accordion header and its content section. Call in the accordion header matching the id value of the corresponding content section.
Aria-labelledby Id value The attribute to provide the label of the content section. Instead of specifying a different label, the content of the corresponding header can be called with Id reference.
Aria-disabled True or false Only required for single select accordions. The aria-disabled attribute must be supplied through script
Role=”button”   In case a native button cannot be provided for the accordion header items, this role can be used instead.

HTML sample

 

<div>

<h3>

<button aria-expanded=”true” aria-controls=”panel-1″ id=”header-1″>Accordion header One</button>

</h3>

<div role=”region” aria-labelledby=”header-1″ id=”panel-1″>

Panel one content goes here

</div>

</div>

 

JavaScript Requirements

Though initial values of aria-expanded is set, the toggle depends on user interaction. Depending on the user interaction the aria-expanded value must be changed using script.

As accordions can be single selection or multi selection, content must be managed accordingly and aria-expanded must be managed accordingly. Eg: For single selection only expanding is possible by user, the collapse automatically happens when the user activates any other header of the accordion. This means triggering of aria-expanded to false depends on user interaction i.e. expansion of any other accordion item. This need to be handled by javascript.

Since collapsing is not possible in case of single selection accordion, aria-disabled attribute or HTML disabled attribute need to be set to true when aria-expanded is set to true.

Testing an Accordion

Keyboard

  • Using tab and shift tab navigate through all the actionable controls Eg: Accordion headers.
  • Using space or enter / return keys the accordion panels must be visible when they are hidden and vice versa.
  • In case of single selection accordion, check if the currently selected header is not keyboard operable and cannot be collapsed using a keyboard.

Using Screen reader

Repeat the steps from keyboard section when screen reader is switched on. In addition check for the following.

  • Are the accordion headers have a role assigned? A button with hierarchical level of heading is the practice.
  • Are the accordion headers announcing the current state? E.g.: Expanded or collapsed
  • Are the accordion headers when expanded also announcing the disabled state in case of single expandable accordions?

Manual Check

  • Check if all the interactive controls show a clear indicator when focused with keyboard?
  • Check if any visual indication is provided for accordion headers to identify that they can be expanded or collapsed? E.g. Plus (+) and Minus (-), Up and down chevrons.
  • Remember color should not be the only way of identifying the action associated with accordion headers.
  • Check if a clear focus indicator is provided for the header and its associated icon when keyboard receives focus on the accordion header.
  • Check if the currently focused accordion header is clearly differentiated from rest of the headers perhaps with a change in background color.

Contact Us

Maxability Pvt Ltd Flat 360,
Block D2 SLS Signature Appartments,
Kaverappa Layout, Kadubeesanahalli,
Bangalore - 560103.

914 823 3361