Rolle Widget

`radio`

Markerer et element som en enkelt valgmulighed i en gensidigt eksklusiv gruppe. Et radio SKAL leve inden i en radiogroup (eller en native fieldset). Brug <input type="radio"> først; grib efter role="radio" kun, når det native input er umuligt.

Hvornår bruges det

Brug <input type="radio"> grupperet via et fælles name-attribut, indpakket i <fieldset> med en <legend>. Native håndterer piltastsnavigation, det rullende tabindex, eksklusivt valg og formularindsendelse gratis.

role="radio" er til brugerdefinerede komponenter — segmenterede kontroller, vurderingwidgets, tematiske vælgere — hvor man ikke kan bruge det native input. Et role="radio"-element SKAL have en forælder (eller aria-owns-mål) med role="radiogroup".

Tastatur- og fokuskontrakt

Per APG-radiogruppeprincippet:

Tab flytter fokus ind i gruppen, til den markerede radio (eller den første radio, hvis ingen er markeret).
Tab flytter fokus UD af gruppen. Tab cykler IKKE mellem radioknapper.
Piletaster (Op/Ned eller Venstre/Højre) flytter fokus til den næste/forrige radio OG markerer den. Dette er usædvanligt — de fleste widgets adskiller fokus fra valg, men radioknapper kobler dem.
Mellemrum markerer den fokuserede radio, hvis den ikke allerede er markeret.

Brug et rullende tabindex: kun den aktuelt valgte radio har tabindex="0", resten har tabindex="-1".

Hyppige fejl

Brugerdefinerede radioknapper, hvor Tab cykler mellem alle valgmuligheder (i stedet for piletaster). Bryder standardinteraktionsmodellen for radioknapper.
role="radio" uden en omsluttende role="radiogroup". Skærmlæsere kan ikke annoncere gruppelabelen eller positionen-i-sættet.
Alle radioknapper med tabindex="0" — alle radioknapper indgår i tabuleringsrækkefølgen og multiplicerer tastetryk.
Manglende aria-checked ved initial rendering.
Brugerdefinerede radioknapper, der skifter fra til, når de trykkes igen. En radio er eksklusiv: når den er markeret, er den eneste måde at fjerne markeringen på at markere en anden i gruppen.

Eksempel

<!-- Foretrukket -->
<fieldset>
  <legend>Notifikationsfrekvens</legend>
  <label><input type="radio" name="freq" value="daily" checked> Dagligt</label>
  <label><input type="radio" name="freq" value="weekly"> Ugentligt</label>
  <label><input type="radio" name="freq" value="never"> Aldrig</label>
</fieldset>

<!-- Brugerdefineret radiogruppe -->
<div role="radiogroup" aria-labelledby="freqLabel">
  <span id="freqLabel">Notifikationsfrekvens</span>
  <div role="radio" aria-checked="true"  tabindex="0">Dagligt</div>
  <div role="radio" aria-checked="false" tabindex="-1">Ugentligt</div>
  <div role="radio" aria-checked="false" tabindex="-1">Aldrig</div>
</div>