Radio Group

Användningsområde

En radioknapp(radiogrupp) används då endast ett av förbestämda alternativ är valbart till skillnad från checkbox där flera eller alla alternativ är valbara.

Radioknappar används främst om alternativen är färre än 5. Är alternativen fler än 5 används istället en dropdown enkel. Vid de tillfällen det finns ett rekommenderat alternativ av de valbara kan det vara bättre att använda en dropdown enkel istället för radiogrupp.

Acceptanskriterier

Följer inte tema
16x16 px innan brytgräns
20x20 px efter brytgräns
Radiogruppen har aktiv, inaktiv, vald aktiv, vald inaktiv och fokustillstånd

Tillgänglighetskrav

Space: Markerar den fokuserade radioknappen om den inte redan är markerad.
Högerpil och Pil ner: Flyttar fokus till nästa radioknapp i gruppen, avmarkerar den tidigare fokuserade knappen och markerar den nyfokuserade knappen. Om fokus ligger på den sista knappen flyttas fokus och markering till den första knappen.
Vänsterpil och Pil upp: Flytta fokus till föregående radioknapp i gruppen, avmarkera den tidigare fokuserade knappen och markera den nyfokuserade knappen. Om fokus ligger på den första knappen flyttas fokus och markering till den sista knappen.
Om ingen av radioknapparna är markerade ställs in fokus på den första radioknappen i gruppen
Om en radioknapp är markerad ställs fokus på den markerade knappen
Radioknapparna finns i eller ägs av ett element med rollen "radiogroup"
Varje radioknappselement har rollen radio
Om en radioknapp är markerad har radioelementet aria-checked satt till "true". Om den inte är markerad, har den aria-checked inställt på "false"
Varje radioelement är märkt med innehållet och har en synlig etikett som är refererad av aria-labelledby eller har en label som anges med aria-label
Radiogruppelementet har en synlig etikett refererad med aria-marked by eller har en etikett som anges med aria-label
Om element som ger ytterligare information om antingen radiogruppen eller varje radioknapp finns så hänvisas dessa element av radiogruppelementet eller radioelementen med den aria-describedbyproperty