<table role="grid" aria-rowcount="463" aria-colcount="13">
- aria-label="Student grades for history 101"
+
<table role="grid" aria-rowcount="463" aria-colcount="13"
+ aria-label="Student grades for history 101">
<!--
aria-rowcount and aria-colcount tell assistive technologies
the actual size of the grid is 463 rows by 13 columns,
diff --git a/_external/aria-practices b/_external/aria-practices
index b7471691a..b9ed31b96 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit b7471691a577728f447b7a7060b61f8c440884e8
+Subproject commit b9ed31b96e7649160e538fa539539207072bc99c
diff --git a/_external/data b/_external/data
index 105ce142a..245ca0c29 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 105ce142a1b7441b8136c4650d482744b5afee3a
+Subproject commit 245ca0c29520633afea7f598c6679a18c7d6d26b
From beb65b1bdff5ff10d0a2594577fd7daef76eccc1 Mon Sep 17 00:00:00 2001
From: w3cgruntbot
Date: Tue, 18 Mar 2025 15:09:11 +0000
Subject: [PATCH 11/25] chore: Update `main` with latest changes from
`aria-practices`
---
ARIA/apg/patterns/treegrid/examples/treegrid-1.md | 2 +-
_external/aria-practices | 2 +-
.../patterns/treegrid/examples/css/treegrid-1.css | 3 ++-
3 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
index a2af8e8e7..51d4294f1 100644
--- a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
+++ b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treegrid/examples/treegrid-1/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
diff --git a/_external/aria-practices b/_external/aria-practices
index b9ed31b96..22c2bb451 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit b9ed31b96e7649160e538fa539539207072bc99c
+Subproject commit 22c2bb451751262957faff46377bd24a8014647b
diff --git a/content-assets/wai-aria-practices/patterns/treegrid/examples/css/treegrid-1.css b/content-assets/wai-aria-practices/patterns/treegrid/examples/css/treegrid-1.css
index 9ed0a6c5e..2a643a1c4 100644
--- a/content-assets/wai-aria-practices/patterns/treegrid/examples/css/treegrid-1.css
+++ b/content-assets/wai-aria-practices/patterns/treegrid/examples/css/treegrid-1.css
@@ -91,7 +91,8 @@
cursor: pointer;
/* Load both right away so there is no lag when we need the other */
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='black' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A"),
+ background-image:
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='black' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='hsl(216, 94%25, 50%25)' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
From 574a8dbd8f6bb5a94a9e12496b0a73698bb135a1 Mon Sep 17 00:00:00 2001
From: w3cgruntbot
Date: Tue, 18 Mar 2025 15:15:25 +0000
Subject: [PATCH 12/25] chore: Update `main` with latest changes from
`aria-practices`
---
.../apg/practices/landmark-regions/landmark-regions-practice.md | 2 +-
_external/aria-practices | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md b/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
index e8715400b..1d7f8d487 100644
--- a/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
+++ b/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
@@ -424,7 +424,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
If a page includes more than one region landmark, each should have a unique label (see Step 3 above).
-
The region landmark can be used identify content that named landmarks do not appropriately describe.
+
The region landmark can be used to identify content that named landmarks do not appropriately describe.
diff --git a/_external/aria-practices b/_external/aria-practices
index 22c2bb451..962f6e771 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 22c2bb451751262957faff46377bd24a8014647b
+Subproject commit 962f6e771dccd4e3bbf8b83da717fb8d75b861da
From 7454eae70ffff2eed40bab4f2461d98d7652c582 Mon Sep 17 00:00:00 2001
From: Howard Edwards
Date: Wed, 19 Mar 2025 10:25:19 -0400
Subject: [PATCH 13/25] Update .tracked-html-assets.json (#395)
---
scripts/pre-build/library/.tracked-html-assets.json | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/scripts/pre-build/library/.tracked-html-assets.json b/scripts/pre-build/library/.tracked-html-assets.json
index ecbce46e6..7a01b8bc4 100644
--- a/scripts/pre-build/library/.tracked-html-assets.json
+++ b/scripts/pre-build/library/.tracked-html-assets.json
@@ -2,5 +2,6 @@
"feed/examples/feed-display.html",
"content\\/patterns\\/landmarks\\/examples\\/.+\\.html",
"toolbar/examples/help.html",
- "color-settings/test-contrast-theme.html"
+ "color-settings/test-contrast-theme.html",
+ "content\\/patterns\\/expandable-region\\/.+\\.html"
]
From 664518efd7950ae2ea8a1eadbcb5e564836eebc2 Mon Sep 17 00:00:00 2001
From: Howard Edwards
Date: Wed, 19 Mar 2025 16:24:58 -0400
Subject: [PATCH 14/25] Update .tracked-html-assets.json to remove
`/expandable-region/*.html` (#397)
---
scripts/pre-build/library/.tracked-html-assets.json | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/scripts/pre-build/library/.tracked-html-assets.json b/scripts/pre-build/library/.tracked-html-assets.json
index 7a01b8bc4..ecbce46e6 100644
--- a/scripts/pre-build/library/.tracked-html-assets.json
+++ b/scripts/pre-build/library/.tracked-html-assets.json
@@ -2,6 +2,5 @@
"feed/examples/feed-display.html",
"content\\/patterns\\/landmarks\\/examples\\/.+\\.html",
"toolbar/examples/help.html",
- "color-settings/test-contrast-theme.html",
- "content\\/patterns\\/expandable-region\\/.+\\.html"
+ "color-settings/test-contrast-theme.html"
]
From 825bb157e40c681a91b168ccc400503d1a57b719 Mon Sep 17 00:00:00 2001
From: w3cgruntbot
Date: Tue, 29 Apr 2025 15:54:33 +0000
Subject: [PATCH 15/25] chore: Update `main` with latest changes from
`aria-practices`
---
.../patterns/combobox/examples/combobox-autocomplete-list.md | 4 ++--
_external/aria-practices | 2 +-
_external/data | 2 +-
3 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
index a9eb473cd..b9cec4923 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -210,7 +210,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Note: 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 and 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 zero to two pixels and padding is reduced by two pixels.
- When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
+ When an element loses focus, its border changes from two pixels to zero and padding is increased by two pixels.
diff --git a/_external/aria-practices b/_external/aria-practices
index 962f6e771..11ab69e56 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 962f6e771dccd4e3bbf8b83da717fb8d75b861da
+Subproject commit 11ab69e56ee9506f1409589d49cb035b34883e38
diff --git a/_external/data b/_external/data
index 245ca0c29..87c02ba68 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 245ca0c29520633afea7f598c6679a18c7d6d26b
+Subproject commit 87c02ba68f650129cdfc3e9d4cb75e7197f76119
From 6990b7e9f9e2b92ec6af0c9f947b62c99b33b002 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Re=CC=81mi=20Be=CC=81tin?=
Date: Thu, 15 May 2025 15:28:31 +0200
Subject: [PATCH 16/25] Remove unused files & update data submodule
---
_data/techniques.yml | 1 -
_data/wcag.yml | 1 -
_external/data | 2 +-
3 files changed, 1 insertion(+), 3 deletions(-)
delete mode 120000 _data/techniques.yml
delete mode 120000 _data/wcag.yml
diff --git a/_data/techniques.yml b/_data/techniques.yml
deleted file mode 120000
index bb32d1897..000000000
--- a/_data/techniques.yml
+++ /dev/null
@@ -1 +0,0 @@
-../_external/data/techniques.yml
\ No newline at end of file
diff --git a/_data/wcag.yml b/_data/wcag.yml
deleted file mode 120000
index 354b6df19..000000000
--- a/_data/wcag.yml
+++ /dev/null
@@ -1 +0,0 @@
-../_external/data/wcag.yml
\ No newline at end of file
diff --git a/_external/data b/_external/data
index 87c02ba68..6bb806b04 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 87c02ba68f650129cdfc3e9d4cb75e7197f76119
+Subproject commit 6bb806b045f33286c8b9b57e0d9aa5e15675fad8
From bde5ae348c0b32f668af57d0fdfd518fd7fd3034 Mon Sep 17 00:00:00 2001
From: w3cgruntbot
Date: Tue, 3 Jun 2025 06:05:42 +0000
Subject: [PATCH 17/25] chore: Update `main` with latest changes from
`aria-practices`
---
ARIA/apg/patterns/slider/examples/slider-temperature.md | 6 +++---
_external/aria-practices | 2 +-
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md
index 9c74b6346..54b72a035 100644
--- a/ARIA/apg/patterns/slider/examples/slider-temperature.md
+++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -125,9 +125,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Temperature
diff --git a/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md b/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
index 1d7f8d487..2992b9a05 100644
--- a/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
+++ b/ARIA/apg/practices/landmark-regions/landmark-regions-practice.md
@@ -72,58 +72,45 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
HTML Sectioning Elements
-
- Several HTML sectioning elements automatically create ARIA landmark regions.
- So, in order to provide assistive technology users with a logical view of a page, it is important to understand the effects of using HTML sectioning elements.
- [[HTML-ARIA]] contains more information on HTML element role mapping.
-
+
The following HTML sectioning elements create ARIA landmark regions.
- Default landmark roles for HTML sectioning elements
+ Landmark roles generated by HTML sectioning elements
HTML Element
-
-
Default Landmark Role
+
Implied Landmark Role
-
aside
-
complementary
-
-
footer
-
-
contentinfo when in context of the body element
+
footer if it is in the context of a body element
+
contentinfo
-
-
header
-
-
banner when in context of the body element
+
header if it is in the context of a body element
+
banner
-
main
-
main
-
nav
-
navigation
-
-
section
-
-
region when it has an accessible name using aria-labelledby or aria-label
+
section if it has an accessible name provided by aria-labelledby or aria-label
+
region
+
+
+
search
+
search
@@ -457,11 +444,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
HTML Technique
-
There is no HTML element that defines a search landmark.
+
+
Use the HTML search element to define a search landmark.
ARIA Technique
-
The role="search" attribute defines a search landmark.
+
If the HTML search element technique is not being used, use a role="search" attribute to define a search landmark.
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.
-
-
+
+
@@ -165,10 +157,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
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.
+ The semantic structure of the FAQ list is conveyed with native ul and li elements.
+ To ensure the list structure is communicated to assistive technologies, a button element containing the question and a div element containing answer are children of an li element. NOTE: The button actions are used to hide and show the div element with the answer.
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.
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
index e2177a02d..b3dbe789c 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-image-description/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
diff --git a/_external/aria-practices b/_external/aria-practices
index 9226c5ec3..a8abeff66 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 9226c5ec39760eef42f5282b3b8955a03b533e42
+Subproject commit a8abeff66d90d7de86d8479ba18f21f46f1a3ce1
diff --git a/content-assets/wai-aria-practices/patterns/disclosure/examples/css/disclosure-faq.css b/content-assets/wai-aria-practices/patterns/disclosure/examples/css/disclosure-faq.css
index 386ea0c54..6a86a19f5 100644
--- a/content-assets/wai-aria-practices/patterns/disclosure/examples/css/disclosure-faq.css
+++ b/content-assets/wai-aria-practices/patterns/disclosure/examples/css/disclosure-faq.css
@@ -1,4 +1,13 @@
-dl.faq button {
+ul.faq,
+ul.faq li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ color: #000;
+ background-color: #fff;
+}
+
+ul.faq button {
margin: 0;
margin-top: 16px;
padding: 4px 8px;
@@ -7,40 +16,34 @@ dl.faq button {
border: none;
background-color: transparent;
border-radius: 5px;
+ color: #000;
}
-dl dd {
- margin: 0;
- padding: 0;
- margin-left: 1.5em;
- padding-bottom: 20px;
- border-bottom: 2px solid #777;
-}
-
-dl.faq .desc {
+ul.faq div.desc {
margin: 0;
margin-top: 0.25em;
- padding: 0.25em;
+ margin-left: 1em;
+ padding: 0.5em;
font-size: 110%;
display: none;
background-color: #fed;
}
-dl.faq button:hover,
-dl.faq button:focus {
+ul.faq button:hover,
+ul.faq button:focus {
padding: 2px 6px;
background-color: #def;
border: 2px solid #005a9c;
cursor: pointer;
}
-dl.faq button[aria-expanded="false"]::before {
+ul.faq button[aria-expanded="false"]::before {
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentcolor' stroke= 'currentcolor' /%3E%3C/svg%3E%0A");
position: relative;
left: -2px;
}
-dl.faq button[aria-expanded="true"]::before {
+ul.faq button[aria-expanded="true"]::before {
content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentcolor' stroke= 'currentcolor' /%3E%3C/svg%3E ");
position: relative;
left: -4px;
diff --git a/content-assets/wai-aria-practices/patterns/disclosure/examples/js/disclosure-button.js b/content-assets/wai-aria-practices/patterns/disclosure/examples/js/disclosure-button.js
index 5621777ed..c4a5a2001 100644
--- a/content-assets/wai-aria-practices/patterns/disclosure/examples/js/disclosure-button.js
+++ b/content-assets/wai-aria-practices/patterns/disclosure/examples/js/disclosure-button.js
@@ -19,7 +19,7 @@ class DisclosureButton {
this.buttonNode = buttonNode;
this.controlledNode = false;
- var id = this.buttonNode.getAttribute('aria-controls');
+ const id = this.buttonNode.getAttribute('aria-controls');
if (id) {
this.controlledNode = document.getElementById(id);
@@ -75,13 +75,13 @@ class DisclosureButton {
window.addEventListener(
'load',
function () {
- var buttons = document.querySelectorAll(
+ const buttons = document.querySelectorAll(
'button[aria-expanded][aria-controls]'
);
- for (var i = 0; i < buttons.length; i++) {
- new DisclosureButton(buttons[i]);
- }
+ buttons.forEach((b) => {
+ new DisclosureButton(b);
+ });
},
false
);
From b0516a0cdac16406be0a7b5be4e6491eebcaee8d Mon Sep 17 00:00:00 2001
From: Howard Edwards
Date: Wed, 18 Jun 2025 16:12:22 -0400
Subject: [PATCH 20/25] Update netlify.toml to force a cache clearance
Netlify has removed the option for clearing the cache on each build. This PR attempts to do that by removing the likely cache locations.
This is needed because in very specific cases, when the changes coming from the `aria-practices` .gitmodule is force-pushed onto, it may not successfully rebuild unless the Netlify branch deploy is re-ran without the cache option.
---
netlify.toml | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/netlify.toml b/netlify.toml
index df0a92105..cca6075ea 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,5 +1,6 @@
[build]
-command = "git submodule update --init --remote && bundle exec jekyll build --config '_config.yml,_config_staging.yml'"
+# NB rm -rf typically applies to UNIX environments which this Netlify deploy works; a temporary solution to while figuring why .gitmodule updates are causing deploy issues unless cache is reset
+command = "rm -rf .git/modules .git/modules/* .git/index .git/.gitmodules .netlify .cache node_modules build dist out && git submodule update --init --remote && bundle exec jekyll build --config '_config.yml,_config_staging.yml'"
publish = "_site"
[build.environment]
From 7cb00430fc52ac4400ac3fd343f255d4d22315d2 Mon Sep 17 00:00:00 2001
From: w3cgruntbot
Date: Tue, 8 Jul 2025 16:59:40 +0000
Subject: [PATCH 21/25] chore: Update `main` with latest changes from
`aria-practices`
---
ARIA/apg/patterns/accordion/accordion-pattern.md | 2 +-
_external/aria-practices | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/ARIA/apg/patterns/accordion/accordion-pattern.md b/ARIA/apg/patterns/accordion/accordion-pattern.md
index 303d44b7b..c0c7b8c4e 100644
--- a/ARIA/apg/patterns/accordion/accordion-pattern.md
+++ b/ARIA/apg/patterns/accordion/accordion-pattern.md
@@ -117,7 +117,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-
WAI-ARIA Roles, States, and Properties:
+
WAI-ARIA Roles, States, and Properties
The title of each accordion header is contained in an element with role button.
+ 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.
+
+ Symphonic Structure: Form, Function, and Feeling
+
+
Ludwig van Beethoven
+
+
+ 7 AM in Theater an der Wien
+
+
+
+
+
+
+ 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.
+