Example Disclosure (Show/Hide) Card
- -About This Example
-
- - The following example demonstrates using the Disclosure Pattern to create an - expandable card. -
-- Authors sometimes want to display a summary of content in a collapsed disclosure that includes content that is more rich or complex than a plain text summary. - In addition, they may want to enable users of pointing devices to toggle the expanded state by clicking anywhere within the visible boundaries of the collapsed summary. - Authors may assume these goals can be achieved by nesting the entire rich summary within a disclosure button. However, doing so can: -
--
-
- - Make the accessible label of the disclosure button cumbersome, inaccurate, or disorienting. - -
-
- Result in invalid HTML, since
- the
<button>element - only permits phrasing content. -
-
- The following example avoids these problems by modifying the structure - of the basic disclosure pattern. Instead of having the entire summary - contained within a button that controls a separate details container, - it nests the expand and collapse disclosure button within an article - element that presents a card. When the card is collapsed, it presents - a rich summary and the disclosure button. When the card is expanded, - its content also includes the additional details content. This - structure allows the summary to include headings, links, or any other - type of rich content while also enabling the disclosure button to have - a concise, understandable accessible name. Finally, some light - JavaScript makes the entire card clickable, so its pointer - interactions are similar to the summary of a basic disclosure. -
-Similar examples include:
- -Example
-Musical Education Conference
@@ -358,267 +283,5 @@Accessibility Features
--
-
-
- To form an accessible name that is brief but sufficiently
- descriptive, the “Details” button uses
aria-labelledby- to combine the card’s heading with the text “Details”. -
- -
- To help people with visual impairments identify the disclosure card
- as interactive and make it easier to perceive that interacting with
- the card will expand or collapse additional content:
-
-
-
-
- When a pointer hovers over the card:
-
-
-
- The card area gains a thin gray border. -
- The “Details” button gains an underline. -
- The chevron icon enlarges slightly. -
- - The text and icon color of the “Details” button change from - gray to black. - -
- -
- When the “Details” button receives keyboard focus:
-
-
-
- - The entire card gains a blue outline, giving the illusion - that the card itself is “focused”. - -
- The “Details” button gains an underline. -
- The chevron icon enlarges slightly. -
- - The text and icon color of the “Details” button change from - gray to blue. - -
- - The card continues to react to hover events by “stacking” - the thin gray border alongside the blue outline, reinforcing - that the entire card remains clickable in both its collapsed - and expanded states. - -
- -
- The “Details” button is accompanied by an encircled chevron icon
- which points in a direction matching its
-
aria-expandedstate: --
-
- - Downward when the disclosure is collapsed, indicating - that activating it will expand the card. - -
- - Upward when the disclosure is expanded, indicating - that activating it will collapse the card. - -
-
- -
- When a pointer hovers over the card:
-
- - To create a logical and predictable keyboard experience for - multimodal users, when any location within the card is clicked by a - pointer, keyboard focus is programmatically placed on the “Details” - button as if the user had activated it explicitly. - -
- - If the user’s click operation triggers a text selection within the - card (i.e., highlight), the disclosure’s toggling behavior is - suppressed to avoid interference. - -
-
- If the user’s click operation targets a focusable element nested
- within the card (e.g., a link, form control, or button) or a
- clickable
<label>, the disclosure’s toggling - behavior is suppressed to avoid interference. -
- - - When forced colors are enabled, system - color keywords are used to ensure visibility and sufficient - contrast for the card’s content and interactive states. - -
- - Animation is suppressed for users who have indicated a preference - for reduced motion or high contrast. - -
-
- Voice control users can toggle a disclosure card by speaking an
- activation command such as
Click Folk Futures: Tradition in the - Classroom details
. -
- -
- The content of each card is contained within an HTML
<article>- element that is labeled by the heading element within the card. This - gives each card thearticle- role, which enables screen reader users to perceive the boundaries - of each card and easily move their reading cursor to the next or - previous card. The article element is preferable to the section - element because section elements would create ARIA landmark - regions, and excessive use of landmark regions diminishes their - utility. -
-
Keyboard Support
-| Key | -Function | -
|---|---|
| - Tab - | -Moves keyboard focus to the disclosure button. | -
|
- Space or - Enter - |
- - Activates the disclosure button, which toggles the - expanded/collapsed state of the card. - | -
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
- |
-
-
|
-
| - |
- aria-expanded="true"
- |
-
- button
- |
-
-
|
-
article |
- - | article |
-
-
|
-
JavaScript and CSS Source Code
- --
-
- - CSS: - disclosure-card.css - -
- - JavaScript: - disclosure-card.js - -
HTML Source Code
-To copy the following HTML code, please open it in CodePen.
- -