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.
Note that the text content of the button - which gives it an accessible name - does not change. Instead, the state of the button is announced via the
Note that we are not using
aria-hidden 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.