Sometimes we use elements that, by clicking a button, can _change their state from hidden to visible or vice versa. This is the case of a drop-down menu or an accordion, for example. And how can we inform the user of a screen reader of these changes? With the ARIA attribute aria-expanded.
So, for example, we can find something like this:
<button aria-expanded=”false”>Menu</button>
<!-- initially hidden -->
<div class="menu">
[...]
</div>
And using the same JavaScript that triggers the <button> and displays the menu, we change the value of the aria-expanded attribute:
<button aria-expanded=”true”>Menu</button>
<!-- will appear visible -->
<div class="menu menu--is-visible">
[...]
</div>
As seen in the example, the ideal is that the content that is shown or hidden is located just after the control responsible for its visibility, so that when the user activates it, it is right next to it and navigation is more logical.
Although we could use the same system for an accordion, these can be a special case as there are some HTML elements that offer the same behavior natively without the need to use ARIA or JS: the <details>-<summary> combination.
Disadvantages? It is not supported by Internet Explorer and is still somewhat buggy on some assistive technologies, so we still need to test them using keyboard and screen readers. To follow the evolution of their support and to know when we can use them without any problem, you can check HTML5 Accessibility.
Top comments (1)
I suggest you create a simple, working example for aria-expanded using html and js.
That gives a complete picture on how to use them.