Caolán McNamara
Among a host of other accessibility enhancements, we have implemented the W3C Accordion Pattern for our expanders, as used in the sidebar and dialogs, where we have a vertical stack of regions each with a heading and associated contents which can be expanded or collapsed.
The implemented recommendation is to surround the heading area of the region with a classic h HTML tag, clarify the expand/collapse button with aria-expanded of true/false, and associate it with content region that the button controls.
Once the basic case was implemented it it became clear that we had cases of hierarchical expanders, the most extreme seen in the accessibility checker tool with multiple levels of expanders.
The natural fit here is that each additional level of the hierarchy is a higher h level, h2, h3, etc. But nothing is ever simple, the deeper levels of the hierarchy are created on demand and their full contents don’t exist until expanded, at which time they are updated with additional contents.
Attempting implementation revealed a preexisting trap where expanders created two elements with the same id causing the level depth tracking to mis-categorize what level the on-demand created expanders should be assigned, resulting in a confusing mixture of h2 headings as children on h3 parents.
Fixing the latent duplicate id bug resolves the ambiguity and the hierarchical on-demand created case of nested expanders now presents appropriate accessibility information to aid navigation.
Something of a irony that the most troublesome case of improving the accessibility navigation feature was found in a sidebar dedicated to displaying potential accessibility issues in a document structure.
