Aria-expanded attribuut gebruiken

Wat is aria-expanded?

Het aria-expanded attribuut is een onderdeel van de WAI-ARIA specificaties. Het is een statusindicator die aan schermlezers doorgeeft of een inklapbaar element, zoals een menu of een tekstblok, momenteel zichtbaar of verborgen is.

Browsers maken een ’toegankelijkheidsboom’ (accessibility tree) naast de visuele code. Visuele veranderingen, zoals een draaiend pijltje, worden niet automatisch doorgegeven aan deze boom. aria-expanded zorgt voor die synchronisatie.

De drie mogelijke waarden

Het correct instellen van de waarde is cruciaal voor de gebruikerservaring.

Let op: Het weglaten van het attribuut is hetzelfde als undefined. Als je aria-expanded="false" gebruikt, beloof je de gebruiker dat er meer content beschikbaar is na interactie.

Wanneer gebruik je aria-expanded?

Niet elk HTML-element ondersteunt dit attribuut. Gebruik het alleen op interactieve elementen die een statuswijziging kunnen triggeren.

• Buttons: De meest voorkomende plek. Dit geldt voor de HTML <button> tag of elementen met role="button".
• Combobox: Om aan te geven of de lijst met opties zichtbaar is.
• Treeitems: In boomstructuren om aan te geven of een map open of dicht is.

Gebruik het niet op statische elementen zoals een <div> of <span> zonder interactieve rol, en vermijd het op elementen die een pagina herladen.

Stappenplan voor implementatie

Volg deze stappen om het attribuut correct toe te voegen aan je componenten.

Zet de juiste HTML-structuur op

Plaats het attribuut op de trigger (de knop), niet op de content die getoond wordt.

<!-- Goed -->
<button aria-expanded="false" aria-controls="content-1">Toon meer</button>
<div id="content-1" hidden>...</div>

<!-- Fout -->
<div aria-expanded="false">Klik hier</div>

Synchroniseer met JavaScript

Je moet zorgen dat de waarde van het attribuut direct verandert zodra de gebruiker de actie uitvoert.

1. Luister naar het ‘click’ event.
2. Controleer de huidige status van aria-expanded.
3. Zet de status om (van true naar false, of andersom).
4. Pas tegelijkertijd de zichtbaarheid van de content aan, bijvoorbeeld door een CSS-klasse toe te voegen.

Gebruik CSS voor de status

Je kunt je CSS koppelen aan de ARIA-status. Dit dwingt je om de toegankelijkheid op orde te hebben, anders werkt de styling niet.

button[aria-expanded="true"] + .content {
  display: block;
}
button[aria-expanded="false"] + .content {
  display: none;
}

Veelgemaakte fouten om te vermijden

Let op deze valkuilen tijdens het ontwikkelen:

• Ontbrekende standaardstatus: Zorg dat aria-expanded="false" (of true) al in de HTML staat bij het laden van de pagina. Voeg het niet pas toe na de eerste klik, anders weet een schermlezergebruiker niet dat de knop iets kan openen.
• Visuele mismatch: Zorg dat als aria-expanded="true" is, de content ook echt zichtbaar is. Als je content verbergt met opacity: 0 maar het attribuut staat op true, ontstaat er verwarring.
• Verkeerd element: Plaats het attribuut nooit op de container die openklapt, maar altijd op de knop die de actie bedient.

Native alternatief: Het details-element

Hoewel ARIA krachtig is, luidt de eerste regel van ARIA: gebruik native HTML als dat kan. Voor simpele open/dicht functionaliteit kun je vaak de <details> en <summary> elementen gebruiken.

<details>
  <summary>Meer informatie</summary>
  <p>Hier staat de verborgen tekst.</p>
</details>

Browsers handelen hierbij de toegankelijkheid, focus en keyboard-support automatisch af. Gebruik aria-expanded vooral wanneer je complexe widgets bouwt waar de standaard HTML-elementen niet voldoen aan je design-eisen.