Egenskab Relation

`aria-controls`

Navngiver det eller de elementer, hvis tilstedeværelse eller indhold denne kontrol styrer. Typiske par: en fane styrer sit tabpanel, en udvidelses-knap styrer et afsløret område. Understøttelsen på tværs af hjælpeteknologi er ujævn — brug sparsomt.

Hvornår skal det bruges

På en kontrol, hvis aktivering ændrer et andet element på siden — de kanoniske eksempler er forholdet fane → tabpanel og en udvidelses-knap → afsløret panel. Det fortæller hjælpeteknologi, at “betjening af denne widget vil påvirke den derovre”, og giver avancerede brugere en måde at springe fra kontrollen til det styrede element.

Brug det ikke på enhver interaktion. De fleste click-handlere behøver ikke aria-controls; reservér det til tilfælde, hvor det styrede element er reelt adskilt i DOM, og brugeren drager fordel af at kende forbindelsen.

Sådan fungerer det

Værdien er en mellemrum-adskilt liste af element-ID’er for det eller de styrede elementer. Det styrede element skal eksistere i DOM på det tidspunkt, relationen forespørges — hvis du kun monterer tabpanelet, når fanen aktiveres, dangler referencen for hjælpeteknologi-brugere, indtil panelet vises.

Understøttelsen er det svage punkt. JAWS eksponerer en genvej til “gå til styret element”, men VoiceOver og NVDA ignorerer stort set attributten uden for specifikke mønstre (faner, comboboxes). Det betyder, at aria-controls sjældent er det, der gør en funktion tilgængelig — det er en forbedring oven på korrekte roller, fokusstyring og aria-expanded. Byg mønsteret korrekt først; tilføj aria-controls sidst.

Hyppige fejl

Behandling af aria-controls som erstatning for flytning af fokus. En “Spring til resultater”-knap skal flytte fokus ved aktivering; tilføjelse af aria-controls gør ikke det.
Pege på et element, der endnu ikke er i DOM. Referencen løser sig til ingenting, indtil panelet renderes.
Glemsel af at sætte aria-expanded på en udvidelses-knap. aria-controls siger “jeg påvirker den ting”; aria-expanded siger “og den er i øjeblikket åben/lukket”.
Brug af aria-controls på en brugerdefineret select for at pege på en muligheds-liste — det rigtige mønster er role="combobox" plus aria-controls på inputtet med aria-activedescendant for den fremhævede mulighed.
Drys af aria-controls på alle knapper “for fuldstændighedens skyld”. Støj; intet afhænger af det.

Eksempel

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  Hvad er din refusionspolitik?
</button>
<div id="faq-1-answer" hidden>
  Refusioner behandles inden for 14 dage …
</div>