Роля Контрола

`radio`

Обозначава елемент като единична опция в група с взаимно изключващ се избор. Радио бутонът трябва да е вътре в radiogroup (или нативен fieldset). Използвайте <input type="radio"> първо; прибягвайте до role="radio" само когато нативният input е невъзможен.

Кога да се използва

Използвайте <input type="radio">, групирани по споделен атрибут name, обвити в <fieldset> с <legend>. Нативното решение обработва навигацията с клавишите за стрелки, роуминг tabindex, изключителния избор и изпращането на формуляри без допълнително усилие.

role="radio" е предназначен за персонализирани компоненти — сегментирани контроли, уиджети за оценяване, тематични избиратели — където нативният input не може да се използва. Елемент с role="radio" ТРЯБВА да има родител (или цел на aria-owns) с role="radiogroup".

Договор за клавиатура и фокус

Съгласно APG шаблона за радио група:

Tab премества фокуса в групата — върху маркирания радио бутон (или върху първия, ако нито един не е маркиран).
Tab премества фокуса ИЗВЪН групата. Tab не обхожда циклично радио бутоните.
Клавишите за стрелки (Нагоре/Надолу или Наляво/Надясно) преместват фокуса към следващия/предишния радио бутон И го маркират. Това е нетипично — повечето уиджети разделят фокуса от избора, но радио бутоните ги свързват.
Space маркира фокусирания радио бутон, ако вече не е маркиран.

Използвайте роуминг tabindex: само текущо избраният радио бутон има tabindex="0", останалите имат tabindex="-1".

Чести грешки

Персонализирани радио бутони, при които Tab обхожда всяка опция (вместо клавишите за стрелки). Нарушава стандартния модел на взаимодействие с радио бутони.
role="radio" без обгръщащ role="radiogroup". Екранните четци не могат да обявят етикета на групата или позицията в множеството.
Всички радио бутони с tabindex="0" — всеки влиза в реда на табулиране, умножавайки натисканията на клавиши.
Липсващ aria-checked при първоначалното рендиране.
Персонализирани радио бутони, които се изключват при повторно натискане. Радио бутонът е с изключителен избор: след маркиране единственият начин да се изключи е да се маркира друг в групата.

Пример

<!-- Предпочитан начин -->
<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>

<!-- Персонализирана радио група -->
<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>