Status Widgetstatus

`aria-expanded`

Geeft aan of een inklapbaar element — openingsknop, keuzelijst, menu, treeitem — momenteel open is. Neemt "true" of "false" als waarde. Doorgaans gecombineerd met aria-controls dat wijst naar de regio die het besturingselement opent.

Wanneer gebruiken

Op elk besturingselement dat een andere regio van de gebruikersinterface opent en sluit: een accordeonkop, een “toon meer”-openingsknop, een combobox-trigger, een menuknop, een treeitem met kinderen, een hamburgermenu-schakelaar. Het besturingselement blijft hetzelfde element in beide staten — alleen het attribuut wisselt.

Als het besturingselement de staat op het element zelf schakelt (dempen / dempen opheffen, volgen / ontvolgen), gebruik dan aria-pressed. aria-expanded beschrijft een relatie met een andere regio, gewoonlijk aangeduid via aria-controls.

De rol bepaalt of aria-expanded betekenisvol is: het wordt ondersteund op button, combobox, link, tab, treeitem, menuitem, gridcell, row en enkele anderen. Het op een <div> zonder rol plaatsen heeft geen nuttig effect.

In synchronie houden

Geldige waarden zijn "true" (regio is open) en "false" (regio is gesloten). De standaard bij weglating is “helemaal geen uitgevouwen staat” — wat verschilt van "false". Als een besturingselement ooit uitvouwbaar is, rendert men aria-expanded="false" in de gesloten staat in plaats van het weg te laten.

Het attribuut wordt bijgewerkt in hetzelfde codepad dat de regio animeert naar open of gesloten. Het attribuut is de bron van waarheid die schermlesers lezen; de visuele pijl is een secundaire aanwijzing voor ziende gebruikers.

Combineer met aria-controls="<regio-id>" zodat de schermlezer de relatie kan aankondigen: “Filters, knop, samengevouwen, bestuurt filtervenster”. Sommige hulptechnologie biedt een snelkoppeling om naar de beheerde regio te springen.

Veelvoorkomende fouten

Een CSS-klasse op het paneel schakelen maar vergeten aria-expanded te wisselen.
aria-expanded gebruiken op een niet-interactief element zonder rol. Het attribuut wordt genegeerd.
Alleen aria-expanded="true" toevoegen — de "false"-staat nooit renderen. Schermlesers kondigen niets aan in de gesloten staat.
aria-expanded gebruiken op een besturingselement dat geen regio uitvouwt (een “Verzenden”-knop).
aria-expanded verwarren met aria-pressed op schakelknoppen die geen aparte regio openen.
aria-controls weglaten, waardoor de relatie tussen trigger en paneel impliciet blijft.

Voorbeeld

<button
  type="button"
  aria-expanded="false"
  aria-controls="filters-panel"
  onclick="toggle(this)"
>
  Filters
</button>

<div id="filters-panel" hidden>
  <!-- filterbesturingselementen -->
</div>