DEV Community

Cover image for A11y tips: report on elements being shown and hidden
Carlos Espada
Carlos Espada

Posted on • Updated on

A11y tips: report on elements being shown and hidden

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (1)

Collapse
moaazbhnas profile image
Moaaz Bhnas

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.