Accordion Example

Important Note About Use of This Example

Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

The below example section contains a simple personal information input form divided into 3 sections that demonstrates the design pattern for accordion.

Example

Name:

Email:

Phone:

Extension:

Country:

City/Province:

Keyboard Support

Key	Function
`Space` or `Enter`	When focus is on the accordion header of a collapsed section, expands the section.
`Tab`	Moves focus to the next focusable element. All focusable elements in the accordion are included in the page `Tab` sequence.
`Shift + Tab`	Moves focus to the previous focusable element. All focusable elements in the accordion are included in the page `Tab` sequence.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
		`h3`	Element that serves as an accordion header. Each accordion header element contains a button that controls the visibility of its content panel. The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.
	`aria-expanded="true"`	`button`	Set to `true` when the Accordion panel is expanded, otherwise set to `false`.
	`aria-controls="ID"`	`button`	Points to the ID of the panel which the header controls.
`region`		`div`	Creates a landmark region that contains the currently expanded accordion panel.
	`aria-labelledby="IDREF"`	`div`	Defines the accessible name for the `region` element. References the accordion header button that expands and collapses the region. `region` elements are required to have an accessible name to be identified as a landmark.

Javascript and CSS Source Code

CSS: accordion.css
JavaScript: accordion.js

HTML Source Code

<div id="accordionGroup" class="accordion">
  <h3>
    <button type="button"
            aria-expanded="true"
            class="accordion-trigger"
            aria-controls="sect1"
            id="accordion1id">
      <span class="accordion-title">
        Personal Information
        <span class="accordion-icon"></span>
      </span>
    </button>
  </h3>
  <div id="sect1"
       role="region"
       aria-labelledby="accordion1id"
       class="accordion-panel">
    <div>
      <!-- Variable content within section, may include any type of markup or interactive widgets. -->
      <fieldset>
        <p>
          <label for="cufc1">
            Name
            <span aria-hidden="true">
              *
            </span>
            :
          </label>
          <input type="text"
                 value=""
                 name="Name"
                 id="cufc1"
                 class="required"
                 aria-required="true">
        </p>
        <p>
          <label for="cufc2">
            Email
            <span aria-hidden="true">
              *
            </span>
            :
          </label>
          <input type="text"
                 value=""
                 name="Email"
                 id="cufc2"
                 aria-required="true">
        </p>
        <p>
          <label for="cufc3">
            Phone:
          </label>
          <input type="text"
                 value=""
                 name="Phone"
                 id="cufc3">
        </p>
        <p>
          <label for="cufc4">
            Extension:
          </label>
          <input type="text"
                 value=""
                 name="Ext"
                 id="cufc4">
        </p>
        <p>
          <label for="cufc5">
            Country:
          </label>
          <input type="text"
                 value=""
                 name="Country"
                 id="cufc5">
        </p>
        <p>
          <label for="cufc6">
            City/Province:
          </label>
          <input type="text"
                 value=""
                 name="City_Province"
                 id="cufc6">
        </p>
      </fieldset>
    </div>
  </div>
  <h3>
    <button type="button"
            aria-expanded="false"
            class="accordion-trigger"
            aria-controls="sect2"
            id="accordion2id">
      <span class="accordion-title">
        Billing Address
        <span class="accordion-icon"></span>
      </span>
    </button>
  </h3>
  <div id="sect2"
       role="region"
       aria-labelledby="accordion2id"
       class="accordion-panel"
       hidden="">
    <div>
      <fieldset>
        <p>
          <label for="b-add1">
            Address 1:
          </label>
          <input type="text"
                 name="b-add1"
                 id="b-add1">
        </p>
        <p>
          <label for="b-add2">
            Address 2:
          </label>
          <input type="text"
                 name="b-add2"
                 id="b-add2">
        </p>
        <p>
          <label for="b-city">
            City:
          </label>
          <input type="text"
                 name="b-city"
                 id="b-city">
        </p>
        <p>
          <label for="b-state">
            State:
          </label>
          <input type="text"
                 name="b-state"
                 id="b-state">
        </p>
        <p>
          <label for="b-zip">
            Zip Code:
          </label>
          <input type="text"
                 name="b-zip"
                 id="b-zip">
        </p>
      </fieldset>
    </div>
  </div>
  <h3>
    <button type="button"
            aria-expanded="false"
            class="accordion-trigger"
            aria-controls="sect3"
            id="accordion3id">
      <span class="accordion-title">
        Shipping Address
        <span class="accordion-icon"></span>
      </span>
    </button>
  </h3>
  <div id="sect3"
       role="region"
       aria-labelledby="accordion3id"
       class="accordion-panel"
       hidden="">
    <div>
      <fieldset>
        <p>
          <label for="m-add1">
            Address 1:
          </label>
          <input type="text"
                 name="m-add1"
                 id="m-add1">
        </p>
        <p>
          <label for="m-add2">
            Address 2:
          </label>
          <input type="text"
                 name="m-add2"
                 id="m-add2">
        </p>
        <p>
          <label for="m-city">
            City:
          </label>
          <input type="text"
                 name="m-city"
                 id="m-city">
        </p>
        <p>
          <label for="m-state">
            State:
          </label>
          <input type="text"
                 name="m-state"
                 id="m-state">
        </p>
        <p>
          <label for="m-zip">
            Zip Code:
          </label>
          <input type="text"
                 name="m-zip"
                 id="m-zip">
        </p>
      </fieldset>
    </div>
  </div>
</div>