ARIA / COMPLETE EXAMPLE
Complete commented example
The markup and the behavior, together.
Open the example separately, or expand the source blocks below. Keep aria-demo.js beside the HTML when adapting the interaction. The stylesheets provide its appearance; the interaction does not depend on them. If the script is unavailable, the workshop details remain readable. Update the example's navigation links for your own site.
Try it: activate Workshop details with a pointer, Enter, or Space. Tab into the revealed link, then move back to the button to close it.
What to bring
Bring a laptop if you have one. Printed materials are also available.
Read the complete commented HTML
<!doctype html> <!-- Project: Gather Access Author: Laurie Kamrowski-Fick Last updated: November 5, 2026Read the complete commented JavaScript
// Project: Gather Access // Author: Laurie Kamrowski-Fick // Copyright © 2026 Gather Access // A small instructional disclosure using a native button, an explicit relationship, and synchronized state. (() => { 'use strict'; document.querySelectorAll('[data-aria-disclosure]').forEach(example => { const button = example.querySelector('button[aria-controls]'); if (!button) return; const panel = document.getElementById(button.getAttribute('aria-controls')); // An incomplete example must retain readable fallback content, rather than expose a dead control. if (!panel || !example.contains(panel)) return; function setOpen(open) { // Visibility and the exposed expanded state always change together. panel.hidden = !open; button.setAttribute('aria-expanded', String(open)); } // Native buttons already translate Enter and Space into clicks; do not add duplicate key handlers. button.addEventListener('click', () => { setOpen(button.getAttribute('aria-expanded') !== 'true'); }); // HTML starts with readable content and a hidden button. Enhance only after its listener is ready. setOpen(false); button.hidden = false; }); })();For a simpler implementation, return to Chapter 1’s native details example. For the reasoning behind this controller, revisit Chapter 4.