radio

Wanneer te gebruiken

Gebruik <input type="radio"> gegroepeerd door een gedeeld name-attribuut, gewikkeld in <fieldset> met een <legend>. Native verwerkt pijltoetsnavigatie, de roving tabindex, exclusieve selectie en formulierinzending standaard.

role="radio" is voor aangepaste componenten — gesegmenteerde besturingselementen, beoordelingswidgets, thematische kiezers — waar het native element niet gebruikt kan worden. Een role="radio"-element MOET een ouder (of aria-owns-doel) hebben met role="radiogroup".

Toetsenbord- en focuscontract

Conform het APG-radiogroeppatroon:

• Tab verplaatst de focus naar de groep, naar het aangevinkte keuzerondje (of het eerste als er geen is aangevinkt).
• Tab verplaatst de focus UIT de groep. Tab doorloopt de keuzerondjes NIET.
• Pijltoetsen (omhoog/omlaag of links/rechts) verplaatsen de focus naar het volgende/vorige keuzerondje EN vinken het aan. Dit is ongebruikelijk — de meeste widgets scheiden focus van selectie, maar keuzerondjes koppelen ze.
• Spatie vinkt het gefocuste keuzerondje aan als het nog niet aangevinkt is.

Gebruik een roving tabindex: alleen het momenteel geselecteerde keuzerondje heeft tabindex="0", de rest heeft tabindex="-1".

Veelvoorkomende fouten

• Aangepaste keuzerondjes waarbij Tab elke optie doorloopt (in plaats van pijltoetsen). Breekt het standaard interactiemodel voor keuzerondjes.
• role="radio" zonder een omhullend role="radiogroup". Schermlezers kunnen het groepslabel of de positie-in-set niet aankondigen.
• Alle keuzerondjes met tabindex="0" — elk keuzerondje staat in de tabvolgorde, wat het aantal toetsenarmaturen vermenigvuldigt.
• Ontbrekende aria-checked bij de eerste render.
• Aangepaste keuzerondjes die uitschakelen wanneer opnieuw ingedrukt. Een keuzerondje is exclusief: eenmaal aangevinkt, is de enige manier om het uit te vinken een ander in de groep aan te vinken.

Voorbeeld

<!-- Voorkeur -->
<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>

<!-- Aangepaste radiogroep -->
<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>