Disclosure widget

A simple control whose sole purpose is to hide or show content, this component is inspired by Adrian Roselli's post about disclosure widgets.

The basic principles demonstrated here can be expanded upon and applied to e.g. off-canvas navigation and dropdown site navigation.

Considerations

Note that the text content of the button - which forms the name of the control for assistive technology users - does not change. Instead, the state of the button is announced via the aria-expanded attribute, which is added via JavaScript. This is the most reliable approach for a disclosure widget, as identified by in Sarah Higley's post: Playing with state.

Note that we are not using aria-expanded on the hidden element. We don't need to, because the element to be hidden directly follows the button to toggle its display in the markup, meaning that we can use the next-sibling combinator in the CSS to determine whether the content is hidden based on the value of the aria-expanded property on the preceding element. Remember, the number one rule for using ARIA in HTML, is to avoid using ARIA in HTML.

This approach also helps to ensure a logical reading and focus order for users.