Tilstand Widgettilstand

`aria-expanded`

Angiver, om et sammenklappelig element — disclosure-knap, combobox, menu, treeitem — aktuelt er åbent. Tager "true" eller "false". Parres typisk med aria-controls, der peger på den region, kontrolelementet åbner.

Hvornår skal den bruges

På ethvert kontrolelement, der åbner og lukker en anden region i brugergrænsefladen: en accordionoverskrift, en “vis mere”-disclosure-knap, en combobox-trigger, en menuknap, et treeitem med underordnede elementer, en hamburger-nav-toggle. Kontrolelementet er det samme element i begge tilstande — kun attributten skifter.

Veksler kontrolelementet tilstand på sig selv (slå lyd til/fra, følg/hold op med at følge), bruges aria-pressed i stedet. aria-expanded beskriver et forhold til en anden region, typisk identificeret ved aria-controls.

Rollen afgør, om aria-expanded er meningsfuld: den understøttes på button, combobox, link, tab, treeitem, menuitem, gridcell, row og enkelte andre. Placering på en <div> uden rolle giver intet nyttigt.

Sådan holdes den synkroniseret

Gyldige værdier er "true" (region er åben) og "false" (region er lukket). Standard ved udeladelse er “ingen udvidet tilstand overhovedet” — hvilket er forskelligt fra "false". Er kontrolelementet nogensinde udvidbart, rendres aria-expanded="false" i lukket tilstand frem for at udelade den.

Opdater attributten i samme kodeblok, der animerer regionen åben eller lukket. Attributten er den kilde, skærmlæsere læser; den visuelle pil er et sekundært signal for seende brugere.

Parres med aria-controls="<region-id>", så skærmlæseren kan annoncere forholdet: “Filtre, knap, sammenklappet, styrer filter-panel”. Nogle hjælpeteknologier tilbyder en genvej til at springe til den styrede region.

Typiske fejl

Skift af en CSS-klasse på panelet, men glemme at skifte aria-expanded.
Brug af aria-expanded på et ikke-interaktivt element uden rolle. Attributten ignoreres.
Kun tilføjelse af aria-expanded="true" — aldrig rendering af "false"-tilstanden. Skærmlæsere annoncerer intet i lukket tilstand.
Brug af aria-expanded på et kontrolelement, der ikke faktisk udvider en region (en “Indsend”-knap).
Forveksling af aria-expanded med aria-pressed på toggle-knapper, der ikke åbner en separat region.
Udeladelse af aria-controls, så forholdet mellem trigger og panel er implicit.

Eksempel

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

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