Accessibility Examples: ARIA Accordion

An accordion is a collapsible stack of headings that, when clicked, each reveal an associated region of content. Accordions are used to reduce the need to scroll a window to view all of the content. A visual affordance is often used to indicate that clicking on a trigger will expand or collapse a region.

Keyboard Interaction Pattern

Required ARIA attributes

The following attributes are needed to implement tooltips:

• button (role) – Placed on the toggle for each accordion region.
• aria-expanded (state) – Placed on the region toggles. The value is true if a region is expanded; false if it is collapsed.
• aria-disabled (state) – (Optional) Placed on the accordion toggles for accordion widgets that require at least one panel to be expanded. Set to true when a region is expanded. The associated toggle may not be used to collape the panel. Reset to false or removed when another panel is expanded.
• aria-controls (property) – Placed on the region toggles. The value is id of the region that is shown and hidden via triggering the toggle.
• region (role) – (Optional) Placed on the accordion region panels to enhance the structure of the widget for screen reader users. Do not use the region role in accordions that have many panels (6 or more) that may be expanded at the same time.
• aria-labelledby (property) – (Optional) Placed on the region panels when the region role is used. It's value is the label of the toggle that is used to expand or collapse the region. The effect is to label the region with the same text as it's toggle.

Markup

Below is a code snippet for the accordion widget example in this page:

<div id="accordion1" class="accordion-group a11y-accordian">
   <h3>
      <button id="trigger1" class="accordion-trigger" aria-expanded="true" aria-controls="panel1">Accordion Contents</button>
   </h3>
   <div id="panel1" role="region" aria-labelledby="trigger1" class="accordion-panel">
      <p>The panels of an accordion widget can contain any type of content, including forms and other interactive content. This panel does not contain any focusable elements.</p>
   </div>
   <h3>
      <button id="trigger2" class="accordion-trigger" aria-expanded="true" aria-controls="panel2">Contact Form</button>
   </h3>
   <div id="panel2" role="region" aria-labelledby="trigger2" class="accordion-panel">
      …
   </div>
   <h3>
      <button id="trigger3" class="accordion-trigger" aria-expanded="true" aria-controls="panel3">Contact Form</button>
   </h3>
   <div id="panel3" role="region" aria-labelledby="trigger3" class="accordion-panel">
      …
   </div>
</div>

Widget CSS

The CSS for an accordion widget is relatively straightforward. It is helpful to the user if a highlight, such as the entire border changing color, is used when an element of the widget has focus. Each toggle header must highlight on focus and hover. If a visible indicator of the expanded or collapsed state of a panel is present, ensure that it is not announced by screen readers, i.e. it is visual-only). utilizing a pure CSS symbol works well.

The CSS for the example in this page is as follows:

.accordion-group {
   margin: 2em;
   border: 1px solid #666;
   border-radius: 15px;
}
.accordion-group.focused {
   border-color: #66afe9;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
}
.accordion-group form {
   margin: 1em;
}
.accordion-group h3 {
   margin: 0;
   padding: 0;
}
.accordion-trigger {
   display: block;
   position: relative;
   padding: 0.75em 0;
   width: 100%;
   background-color: #eeeeef;
   border: none;
   border-top: 1px solid #666;
   border-bottom: 1px solid #666;
}
.accordion-trigger .accordion-plus {
   position: absolute;
   right: 1.5em;
   top: 50%;
   transform: translate(0, -50%);
   height: 20px;
   width: 5px;
   background-color: #222;
   transition: height 0.1s;
}
.accordion-trigger .accordion-plus:after {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   content: "";
   height: 5px;
   width: 20px;
   background-color: #222;
}
.accordion-trigger[aria-expanded=true] .accordion-plus {
   height:4px;
   transition: height 0.1s;
}
.accordion-trigger:hover {
   background-color: rgba(102,175,233,0.25);
   outline: none;
}
.accordion-trigger:focus {
   background-color: #66afe9;
   outline: none;
}
.accordion-group h3:first-of-type .accordion-trigger {
   border-top: none;
   border-radius: 15px 15px 0 0;
}
.accordion-group h3:last-of-type .accordion-trigger[aria-expanded=false] {
   border-bottom: none;
   border-radius: 0 0 15px 15px;
}
.accordion-panel {
   padding: 1em;
}

Downloads

• Accordion Script (jQuery)
• Disclosure Script (jQuery)
• Example CSS