Rola Widget

`radio`

Oznacza element jako pojedynczą opcję w grupie wzajemnie wykluczających się wyborów. Przycisk radiowy musi znajdować się wewnątrz radiogroup (lub natywnego fieldset). Najpierw użyj <input type="radio">; po role="radio" sięgaj tylko wtedy, gdy natywny input jest niemożliwy.

Kiedy używać

Używaj <input type="radio"> pogrupowanych wspólnym atrybutem name, opakowanych w <fieldset> z <legend>. Element natywny obsługuje nawigację klawiszami strzałek, wędrujący tabindex, wybór wykluczający się i wysyłanie formularza — wszystko za darmo.

role="radio" jest przeznaczony dla komponentów własnych — kontrolek segmentowych, widżetów oceniania, wyspecjalizowanych selektorów — gdzie nie można użyć natywnego inputa. Element role="radio" MUSI mieć rodzica (lub cel aria-owns) z role="radiogroup".

Kontrakt klawiaturowy i focusu

Zgodnie z wzorcem grupy przycisków radiowych APG:

Tab przenosi focus do grupy, na zaznaczony przycisk radiowy (lub pierwszy, jeśli żaden nie jest zaznaczony).
Tab przenosi focus POZA grupę. Tab NIE cykluje między przyciskami radiowymi.
Klawisze strzałek (góra/dół lub lewo/prawo) przenoszą focus na następny/poprzedni przycisk radiowy I go zaznaczają. To wyjątkowe — większość widżetów rozdziela focus od zaznaczenia, ale przyciski radiowe łączą je ze sobą.
Spacja zaznacza sfocusowany przycisk radiowy, jeśli nie jest jeszcze zaznaczony.

Stosuj wędrujący tabindex: tylko aktualnie wybrany przycisk radiowy ma tabindex="0", pozostałe mają tabindex="-1".

Typowe błędy

Własne przyciski radiowe, w których Tab cykluje między każdą opcją (zamiast klawiszy strzałek). Narusza standardowy model interakcji z przyciskami radiowymi.
role="radio" bez opakowującego role="radiogroup". Czytniki ekranu nie mogą ogłosić etykiety grupy ani pozycji w zbiorze.
Wszystkie przyciski radiowe z tabindex="0" — każdy przycisk wchodzi do kolejności tabulacji, mnożąc liczbę naciśnięć klawiszy.
Brak aria-checked podczas początkowego renderowania.
Własne przyciski radiowe, które wyłączają się po ponownym naciśnięciu. Przycisk radiowy jest wykluczający: po zaznaczeniu jedynym sposobem jego odznaczenia jest zaznaczenie innego w grupie.

Przykład

<!-- Zalecane -->
<fieldset>
  <legend>Częstotliwość powiadomień</legend>
  <label><input type="radio" name="freq" value="daily" checked> Codziennie</label>
  <label><input type="radio" name="freq" value="weekly"> Co tydzień</label>
  <label><input type="radio" name="freq" value="never"> Nigdy</label>
</fieldset>

<!-- Własna grupa przycisków radiowych -->
<div role="radiogroup" aria-labelledby="freqLabel">
  <span id="freqLabel">Częstotliwość powiadomień</span>
  <div role="radio" aria-checked="true"  tabindex="0">Codziennie</div>
  <div role="radio" aria-checked="false" tabindex="-1">Co tydzień</div>
  <div role="radio" aria-checked="false" tabindex="-1">Nigdy</div>
</div>