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.
Beethoven invites you to uncover the architectural
principles that make a composition — or a curriculum —
sing. He compares symphonic form to effective educational frameworks,
emphasizing how recurring motifs and variations foster
retention, engagement, and deep emotional resonance. He
asserts that structure should never constrain passion;
rather, it channels it into something truly enduring.
Blending musical theory with pedagogical insight,
Beethoven encourages educators to embrace contrast,
conflict, and resolution in their lesson planning. Just
as the second movement of a symphony can be a quiet
reflection following a turbulent first, so too should
pacing and emotional cadence be considered in designing
impactful learning experiences.
Folk Futures: Tradition in the Classroom
Antonín Dvořák
8 AM in Rudolfinum Hall
Dvořák explores the power of cultural roots in modern
music education, drawing from his own deep connection to
the folk melodies of Bohemia. He demonstrates how
incorporating regional traditions into teaching not only
diversifies students’ musical vocabulary, but fosters a
sense of identity and continuity across generations.
Through examples from his own works, he illustrates how
authenticity can coexist with innovation.
Attendees will learn strategies to weave traditional
forms into contemporary curricula, using rhythm,
language, and storytelling as tools of engagement.
Dvořák makes the case that honoring heritage doesn’t
mean resisting progress—instead, it provides a vibrant
foundation on which students can build their own musical
voices.
Playful Dissonance: Teaching with Wit and Wonder
Francis Poulenc
9 AM in Église Saint-Roch
Poulenc brings charm and surprise to the spotlight,
making a compelling case for humor as pedagogy. Through anecdotes, musical
excerpts, and sly asides, he reveals how wit and whimsy
can disarm resistance and unlock creativity in learners
of all ages. He shows that even dissonance, when
playfully framed, becomes an invitation rather than a
disruption.
This session challenges the notion that music education
must be rigid or overly serious. Poulenc encourages
instructors to embrace imperfection, joy, and even
contradiction in their teaching. The result? A classroom
atmosphere that not only nurtures skill but sparks
lifelong curiosity and delight.
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-expanded state:
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.
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 the article
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
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.
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.
article
article
This does not have to be declared in the code because it is
implicit in the HTML article element.
Enables screen reader users to perceive the boundaries of
each card and easily move a reading cursor from card to
card.
