Egenskap Relation

`aria-controls`

Namnger det element eller de element vars närvaro eller innehåll denna kontroll styr. Vanliga kombinationer: en flik styr sin tabpanel, en disclosure-knapp styr en avslöjad region. Stödet bland hjälpmedelsteknik är ojämnt — använd sparsamt.

När ska egenskapen användas

På en kontroll vars aktivering ändrar ett annat element på sidan — de kanoniska exemplen är relationen flik → tabpanel och en disclosure-knapp → avslöjad panel. Det talar om för hjälpmedelsteknik att “att använda denna widget påverkar den där borta”, vilket ger avancerade användare ett sätt att hoppa från kontrollen till det kontrollerade elementet.

Nå inte efter det för varje interaktion. De flesta klickhanterare behöver inte aria-controls; reservera det för fall där det kontrollerade elementet är genuint separat i DOM och användaren drar nytta av att känna till kopplingen.

Hur det fungerar

Värdet är en blankstegsavgränsad lista med element-ID:n för det eller de kontrollerade elementen. Det kontrollerade elementet måste finnas i DOM när relationen efterfrågas — om du monterar tabpanelen först när fliken aktiveras dinglar referensen för AT-användare tills panelen visas.

Stödet är den svaga punkten. JAWS exponerar en genväg för “gå till kontrollerat element”, men VoiceOver och NVDA ignorerar i stort sett attributet utanför specifika mönster (flikar, comboboxar). Det innebär att aria-controls sällan är det som gör en funktion tillgänglig — det är en förbättring ovanpå korrekta roller, fokushantering och aria-expanded. Bygg mönstret rätt först; lägg till aria-controls sist.

Vanliga fel

Behandla aria-controls som en ersättning för att flytta fokus. En knapp av typen “Hoppa till resultat” måste flytta fokus vid aktivering; att lägga till aria-controls gör inte det.
Peka på ett element som ännu inte finns i DOM. Referensen löser till ingenting tills panelen renderas.
Glömma att även sätta aria-expanded på en disclosure-knapp. aria-controls säger “jag påverkar det där”; aria-expanded säger “och det är för närvarande öppet/stängt”.
Använda aria-controls på en anpassad select för att peka på en alternativlista — rätt mönster där är role="combobox" plus aria-controls på inmatningsfältet, med aria-activedescendant för det markerade alternativet.
Strö aria-controls på varje knapp “för fullständighetens skull”. Brus; ingenting förlitar sig på det.

Exempel

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  Vad är er återbetalningspolicy?
</button>
<div id="faq-1-answer" hidden>
  Återbetalningar behandlas inom 14 dagar …
</div>