you are here

Components often hide or show content. Some examples:

  • An FAQ, where each question is a button that expands or collapses the answer.

    FAQ component with 4 questions and first question expanded

  • A hamburger menu in a mobiel viewport, it slides in or out of view.

    Ancienne Belgique website with collapsed hamburger menu Ancienne Belgique website with collapsed hamburger menu

  • A simple dropdown, expanding or collapsing the subitems.

    website Flanders with closed dropdown menu for tourism with open dropdown menu

A screenreader user can't see if the component is expanded or collapsed. That's where the aria-expanded attribute (spec) comes in.

Place the attribute on the element thats initiates the change, in most cases a button. For example, the FAQ component:

<button aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>

Synchronize the value of the attribute (aria-expanded="false" or "true") with the visual state of the component. This will communicate the status (expanded or collapsed) to screenreaders when the button receives focus. Don't place the attribute on the content that get's shown or hidden. A common mistake which makes the attribute useless.

As you can see in the code example, the ARIA specification also provides an aria-controls attribute to tell screenreaders which content the button controls. Unfortunately, there's poor support for the attribute.


Be the first to comment