Roll Widget

`radio`

Markerar ett element som ett enda alternativ i en ömsesidigt uteslutande grupp. En radioknapp måste finnas inuti en radiogroup (eller ett inbyggt fieldset). Använd <input type="radio"> först; nå för role="radio" enbart när det inbyggda elementet är omöjligt.

När ska det användas

Använd <input type="radio"> grupperade med ett gemensamt name-attribut, omslutna i <fieldset> med en <legend>. Det inbyggda elementet hanterar pilnavigering, rullande tabindex, exklusivt urval och formulärinlämning utan extra kod.

role="radio" är för anpassade komponenter — segmenterade kontroller, betygswidgetar, tematiserade väljare — där du inte kan använda det inbyggda elementet. Ett role="radio"-element MÅSTE ha ett förälderelement (eller aria-owns-mål) med role="radiogroup".

Tangentbords- och fokusbeteende

Per APG:s radiogruppmönster:

Tab flyttar fokus in i gruppen, till den markerade radioknappen (eller den första om ingen är markerad).
Tab flyttar fokus UT ur gruppen. Tab cyklar INTE mellan radioknappar.
Piltangenter (upp/ned eller vänster/höger) flyttar fokus till nästa/föregående radioknapp OCH markerar den. Detta är ovanligt — de flesta widgets separerar fokus från urval, men radioknappar kopplar samman dem.
Mellanslag markerar den fokuserade radioknappen om den inte redan är markerad.

Använd ett rullande tabindex: enbart den valda radioknappen har tabindex="0", resten har tabindex="-1".

Vanliga fel

Anpassade radioknappar där Tab cyklar mellan varje alternativ (i stället för piltangenter). Bryter det standardiserade radiointeraktionsmönstret.
role="radio" utan ett omslutande role="radiogroup". Skärmläsare kan inte meddela gruppetikett eller position i uppsättningen.
Alla radioknappar med tabindex="0" — varje radioknapp hamnar i tabbordningen, vilket mångdubblar tangenttryckningarna.
Saknat aria-checked vid initial rendering.
Anpassade radioknappar som växlar av vid omtryckning. En radioknapp är exklusiv: när den är markerad är det enda sättet att avmarkera den att markera en annan i gruppen.

Exempel

<!-- Föredraget -->
<fieldset>
  <legend>Notification frequency</legend>
  <label><input type="radio" name="freq" value="daily" checked> Daily</label>
  <label><input type="radio" name="freq" value="weekly"> Weekly</label>
  <label><input type="radio" name="freq" value="never"> Never</label>
</fieldset>

<!-- Anpassad radiogrupp -->
<div role="radiogroup" aria-labelledby="freqLabel">
  <span id="freqLabel">Notification frequency</span>
  <div role="radio" aria-checked="true"  tabindex="0">Daily</div>
  <div role="radio" aria-checked="false" tabindex="-1">Weekly</div>
  <div role="radio" aria-checked="false" tabindex="-1">Never</div>
</div>