radio

Milloin käyttää

Käytä <input type="radio">-elementtiä, joka on ryhmitelty yhteisellä name-attribuutilla, <fieldset>-elementin sisällä <legend>-elementillä. Natiivi hoitaa nuolinäppäinnavigoinnin, kiertävän tabindeksin, yksinomaisen valinnan ja lomakkeen lähettämisen automaattisesti.

role="radio" on tarkoitettu mukautetuille komponenteille — segmentoidut säätimet, arvosteluwidgetit, teemapoimijat — joissa natiivia syötettä ei voida käyttää. role="radio"-elementillä TÄYTYY olla ylätaso (tai aria-owns-kohde) role="radiogroup"-roolilla.

Näppäimistö- ja kohdistussopimus

APG-radioryhmämallin mukaan:

• Tab siirtää kohdistuksen ryhmään, valitulle radiolle (tai ensimmäiselle radiolle, jos yhtäkään ei ole valittu).
• Tab siirtää kohdistuksen ulos ryhmästä. Tab ei kierrä radiojen välillä.
• Nuolinäppäimet (Ylös/Alas tai Vasen/Oikea) siirtävät kohdistuksen seuraavaan/edelliseen radioon JA valitsevat sen. Tämä on poikkeuksellista — useimmat elementit erottavat kohdistuksen ja valinnan, mutta radiot yhdistävät ne.
• Välilyönti valitsee kohdistetun radion, jos se ei ole jo valittu.

Käytä kiertävää tabindeksiä: vain valitulla radiolla on tabindex="0", muilla on tabindex="-1".

Yleiset virheet

• Mukautetut radiot, joissa Tab kiertää jokaisen vaihtoehdon välillä (nuolinäppäinten sijaan). Rikkoo radiojen standardivuorovaikutusmallin.
• role="radio" ilman käärivää role="radiogroup"-roolia. Ruudunlukuohjelmat eivät pysty ilmoittamaan ryhmän otsikkoa tai sijainnin sarjassa.
• Kaikilla radioilla tabindex="0" — jokainen radio siirtyy sarkausjärjestykseen, mikä moninkertaistaa näppäinpainallukset.
• Puuttuva aria-checked alkurenderöinnissä.
• Mukautetut radiot, jotka poistavat valinnan kun painetaan uudelleen. Radio on yksinomainen: kun se on valittu, ainoa tapa poistaa valinta on valita toinen ryhmässä.

Esimerkki

<!-- Suosittu tapa -->
<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>

<!-- Mukautettu radioryhmä -->
<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>