aria-expanded

När används det

På valfri kontroll som öppnar och stänger ett annat område i gränssnittet: ett dragspelshuvud, en “visa mer”-disclosure-knapp, en combobox-utlösare, en menyknapp, ett treeitem med barn, en hamburgermenyknapp. Kontrollen är samma element i båda tillstånden — bara attributet vänder.

Om kontrollen växlar tillstånd på elementet självt (ljud på / av, följ / sluta följa), använd aria-pressed i stället. aria-expanded beskriver en relation med ett annat område, vanligtvis identifierat av aria-controls.

Rollen avgör om aria-expanded är meningsfull: det stöds på button, combobox, link, tab, treeitem, menuitem, gridcell, row och några till. Att sätta det på en <div> utan roll gör ingenting användbart.

Hur man håller det synkroniserat

Giltiga värden är "true" (regionen är öppen) och "false" (regionen är stängd). Standardvärdet om det utelämnas är “inget expanderat tillstånd alls” — vilket skiljer sig från "false". Om kontrollen någonsin kan expanderas, rendera aria-expanded="false" i det stängda tillståndet snarare än att utelämna det.

Uppdatera attributet i samma kodväg som animerar regionen öppen eller stängd. Attributet är källan till sanning som skärmläsare läser; den visuella pilen är en sekundär ledtråd för seende användare.

Para med aria-controls="<region-id>" så att skärmläsaren kan annonsera relationen: “Filter, knapp, komprimerat, styr filter-panel”. En del hjälpmedel erbjuder en genväg för att hoppa till den kontrollerade regionen.

Vanliga fel

• Att växla en CSS-klass på panelen men glömma att vända aria-expanded.
• Att använda aria-expanded på ett icke-interaktivt element utan roll. Attributet ignoreras.
• Att bara lägga till aria-expanded="true" — aldrig rendera "false"-tillståndet. Skärmläsare annonserar ingenting i det stängda tillståndet.
• Att använda aria-expanded på en kontroll som faktiskt inte expanderar ett område (en “Skicka”-knapp).
• Att förväxla aria-expanded med aria-pressed på växlingsknappar som inte öppnar ett separat område.
• Att utelämna aria-controls, vilket gör relationen mellan utlösare och panel implicit.

Exempel

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

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