Pseudo-Accordions Triggered By Buttons and Links

The pseudo-accordion panels below are triggered either by buttons or links, in order to provide examples for assessing semantic “feel” for the trigger elements.

The accordions also can be used to assess whether or not screen readers correctly and reliably announce state when using aria-expanded. As a backup to the aria-expanded usage, we are also pumping short messages into an aria-live region, which reports the collapsed or expanded state. The aria-live is set to “assertive” because we want the messages to preempt one another. Messages are present in the live region for 5 seconds, and the region is emptied prior to new content being written to it. If “assertive” is causing problems, you can change to polite via this checkbox:
Use aria-live="polite" for live region

The pseudo-accordions also serve to test whether screen readers maintain focus on elements that move physically on the page. For example, we have noticed that VoiceOver on Mac can sometimes lose focus if a currently focused element moves visually on the page.

We are also implementing aria-controls, relating the triggers to the accordion panel contents they control, despite the admonishments of Heydon Pickering.

Note: Firefox bug related to CSS pseudo elements prevents NVDA from correctly announcing the expanded/collapsed state. (You will still hear the backup announcement in the live region, however. You can disable them using this checkbox:
Use CSS pseudo elements for expand/collapse icons

Pseudo-Accordion Group One: Buttons as Triggers

Pseudo-Accordion Group Two: Links as Triggers

Pseudo-Accordion Group Three: Links with Role=Button and Complex, Nested Content as Triggers, with No ARIA-Controls

Note: For simplicity, even though the trigger is technically a button, we are only listening for clicks, no spacebar press. But checkboxes are being made non-tabbable when panels collapse to preserve a proper tab order and prevent discovery of aria-hidden controls.