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

: 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.
: 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.
: 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 Holidays in the calendar. Please note: 24-hour rental spaces, 24-hour rental lots, and disabled parking is enforced at all times.
: Some parking facility restrictions differ from others. Be sure to take note of the signs at each lot entrance.

Accessibility Features

The semantic structure of the FAQ is conveyed with native dl, dt and dd elements. To ensure the list structure is communicated to assistive technologies, instead of applying a button role to the dt element, a button element is contained within the dt element. Similarly, each div element containing answer content that can be shown or hidden by the button is a child of a dd element. Since all the dd elements are present in the DOM even if some answers are hidden, the dl structure is always complete.
To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.
Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
To ensure the inline SVG arrow graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the arrows are synchronized with the color of the text content. For example, the color of the arrow is set to match the foreground color of high contrast mode text by specifying the CSS currentColor value for the stroke and fill properties of the polygon elements used to draw the arrows. If specific colors were instead used to specify the polygon properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the arrows and the background or even make the arrows invisible if the color matched the high contrast mode background.
Note: The SVG element needs to have the CSS forced-color-adjust property set to auto for the currentColor value to be updated in high contrast mode. Some browsers do not use auto for the default value.

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

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

CSS: disclosure-faq.css
Javascript: disclosureButton.js

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

Example

Parking FAQs

Accessibility Features

Keyboard Support

Role, Property, State, and Tabindex Attributes

Javascript and CSS Source Code

HTML Source Code