Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions

The following example demonstrates using the disclosure design pattern to create a set of frequently asked questions where the answers may be independently shown or hidden.

Similar examples include:

Example

Parking FAQs

Accessibility Features

Keyboard Support

Key Function
Tab Moves keyboard focus to the disclosure button.
Space or
Enter
Activates the disclosure button, which toggles the visibility of the answer to the question.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
aria-controls="ID_REFERENCE" button Identifies the element controlled by the disclosure button.
aria-expanded="false" button
  • Indicates that the container controlled by the disclosure button is hidden.
  • CSS attribute selectors (e.g. [aria-expanded="false"]) are used to synchronize the visual states with the value of the aria-expanded attribute.
  • The visual indicator of the show/hide state is created using CSS :before pseudo element and content property so the image is reliably rendered in high contrast mode of operating systems and browsers.
aria-expanded="true" button
  • Indicates that the container controlled by the disclosure button is visible.
  • CSS attribute selectors (e.g. [aria-expanded="true"]) are used to synchronize the visual states with the value of the aria-expanded attribute.
  • The visual indicator of the show/hide state is created using CSS :before pseudo element and content property so the image is reliably rendered in high contrast mode of operating systems and browsers.

Javascript and CSS Source Code

HTML Source Code

<h3>
  Parking
  <abbr title="Frequently Asked Questions">
    FAQ
  </abbr>
  s
</h3>
<dl class="faq">
  <dt>
    <button type="button"
            aria-expanded="false"
            aria-controls="faq1_desc">
      What do I do if I have a permit for an assigned lot, but can't find a space there?
    </button>
  </dt>
  <dd>
    <div id="faq1_desc" class="desc">
      Park at the nearest available parking meter without paying the meter       and call 999-999-9999 to report the problem. We will note and approve your alternate       location and will investigate the cause of the shortage in your assigned facility.
    </div>
  </dd>
  <dt>
    <button type="button"
            aria-expanded="false"
            aria-controls="faq2_desc">
      What do I do if I lose my permit or if my permit is stolen?
    </button>
  </dt>
  <dd>
    <div id="faq2_desc" class="desc">
      You should come to the Parking office and report the       loss. There is a fee to replace your lost permit. However, if your permit was stolen, a       copy of a police report needs to be submitted along with a stolen parking permit form for a fee replacement exemption.
    </div>
  </dd>
  <dt>
    <button type="button"
            aria-expanded="false"
            aria-controls="faq3_desc">
      Is there free parking on holidays?
    </button>
  </dt>
  <dd>
    <div id="faq3_desc" class="desc">
      All facilities are restricted from 2:00 am - 6:00 am on all days. No       exceptions are made for any holiday or recess except those officially listed as a
      <q>
        Holidays
      </q>
      in the calendar. Please note: 24-hour rental spaces, 24-hour rental lots, and       disabled parking is enforced at all times.
    </div>
  </dd>
  <dt>
    <button type="button"
            aria-expanded="false"
            aria-controls="faq4_desc">
      Do all parking facilities have the same enforcement rules?
    </button>
  </dt>
  <dd>
    <div id="faq4_desc" class="desc">
      Some parking facility restrictions differ from others. Be sure to       take note of the signs at each lot entrance.
    </div>
  </dd>
</dl>