Pseudo Accordion with CSS Animations

We have seen implementations of accordions that break the screen reader focus. In particular, we have seen implementations that cause VoiceOver on MacOS to “lose its place” on the page, creating a potential WCAG Meaningful Sequence non-conformance issue.

In the ARIA Authoring Practices 1.1-conformant accordion panels on this page, we animate using just CSS transitions and transforms. Ending state for the accordion is display: none. Typically, implementations animate the height to zero. This one does this also but is made to be clunky and to toggle the content between accessible and not accessible in an abrupt way, in order to attempt to break screen reader focus. The first three accordions also do not all use natively focusable elements for triggers but instead use a tab focusable div, a plain link, and a link with button role, in another attempt to cause a loss of focus. The last three accordion headings are native HTML buttons.

How to test this in order to attempt to create a loss of focus?: Expand the first, super-tall panel. Then tab to a lower accordion heading and expand its panel. This will cause the page to “move around under” the screen reader's point of (visual/on-screen) focus/point of regard, as the top panel collapses. The test is to see whether this visual page movement causes the screen reader's focus to be lost.

For example, VoiceOver MacOS will draw a black box around the heading with the focus. But when the higher panel collapses, the black box will remain visually stationary on the page. We have seen instances where the visual misalignment between the screen-reader drawn black box and the element that has actual focus will cause the screen reader to lose its place on the page.

Heading Link One some more info