FigmaOpenCode

Input Radios

Synonyme: Optionsfelder, Auswahlschalter, Radiobuttongruppe, Radiobuttons, Radio Buttons, Radio Group
Ähnliche Komponenten: Checkboxes

Kurzbeschreibung

Radios dienen der Auswahl nur einer Option aus sich gegenseitig ausschließenden Optionen.

Beispiele

Default

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label">
  Wo sind Sie aktuell gemeldet?
</legend>
<div class="kern-fieldset__body">
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="hamburg" name="meldeadresse" type="radio">
    <label class="kern-label" for="hamburg">in Hamburg</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="ausland" name="meldeadresse" type="radio">
    <label class="kern-label" for="ausland">im Ausland</label>
  </div>
<div>
</fieldset>

Optional

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label">
  Wo sind Sie aktuell gemeldet?
  <span class="kern-label__optional">- Optional</span>
</legend>
<div class="kern-fieldset__body">
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="hamburg" name="meldeadresse" type="radio">
    <label class="kern-label" for="hamburg">in Hamburg</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="ausland" name="meldeadresse" type="radio">
    <label class="kern-label" for="ausland">im Ausland</label>
  </div>
<div>
</fieldset>

Hinweistext und Fehlermeldung

Code anzeigen

<fieldset class="kern-fieldset kern-fieldset--error" aria-describedby="hint-text">
<legend class="kern-label">
  Wo sind Sie aktuell gemeldet?
</legend>
<div class="kern-hint" id="hint-text">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<div class="kern-fieldset__body">
  <div class="kern-form-check">
    <input class="kern-form-check__radio kern-form-check__radio--error" id="hamburg" name="meldeadresse" type="radio">
    <label class="kern-label" for="hamburg">in Hamburg</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio kern-form-check__radio--error" id="ausland" name="meldeadresse" type="radio">
    <label class="kern-label" for="ausland">im Ausland</label>
  </div>
<div>
<p class="kern-error" id="kern-input-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</fieldset>

Horizontale Ausrichtung

Code anzeigen

<fieldset class="kern-fieldset">
<legend class="kern-label">
  Wo sind Sie aktuell gemeldet?
</legend>
<div class="kern-fieldset__body kern-fieldset__body--horizontal">
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="hamburg" name="meldeadresse" type="radio">
    <label class="kern-label" for="hamburg">in Hamburg</label>
  </div>
  <div class="kern-form-check">
    <input class="kern-form-check__radio" id="ausland" name="meldeadresse" type="radio">
    <label class="kern-label" for="ausland">im Ausland</label>
  </div>
<div>
</fieldset>

Beschreibung

infoHinweis

Für Input Radios gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.

Mit einer Radio-Gruppe können Nutzende eine Auswahl treffen, welche Option zutreffend ist. Dies kann immer nur eine Option sein, niemals mehrere. Ein Radio erhält immer eine Beschriftung (Label), die die Option möglichst knapp als Aussage beschreibt. Der Indikator – ein Punkt im Kreis – zeigt an, dass die Option ausgewählt ist.
Radio-Gruppen haben immer eine Beschriftung, die klar machen soll, worauf sich die Auswahl bezieht. Bei Bedarf kann die Gruppe mit dem Zusatz „optional“ gekennzeichnet werden. Ein Hint kann mehr Informationen geben. Sollte eine umfangreichere Erklärung nötig sein, kann auch Zugang zur „Hilfe“ angezeigt werden. Die Fehlermeldung wird unterhalb der Gruppe angezeigt, nicht für einzelne Radios.
Input Radio kann alle unter Input beschriebenen Zustände annehmen, mit Ausnahme von „readonly“.

Verwendungsregeln

Radios können zum Beispiel in Formularen verwendet werden, wenn Nutzende eine Option auswählen sollen. Dies könnte zum Beispiel eine Auswahl sein, wie sich Nutzende nachfolgend identifizieren möchten. Gibt es nur zwei Radios, werden diese horizontal angezeigt, bei mehr als zwei Optionen wird die Liste vertikal angeordnet. Ob bereits eine der Optionen von vornherein ausgewählt sein sollte, hängt vom Einsatzzweck ab:

• Handelt es sich um Einstellungen, kann bereits eine Vorauswahl vorhanden sein.
• Wird hingegen durch die Auswahl eine Frage beantwortet, sollte keine der Optionen vorausgewählt sein.

Dos und Don’ts

Es können niemals mehrere Optionen einer Radio-Gruppe ausgewählt werden.

Formuliere die Beschriftung eines Radios wenn möglich als Aussage, nicht als Frage.

Halte die Beschriftung eines Radios möglichst knapp, so dass sie gut erfassbar ist.

Weitere Hinweise

• Formuliere die Beschriftung eines Radios wenn möglichst positiv, also ohne „... nicht ...“ oder „... kein ...“.

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 3.3.2

Radio-Button-Gruppen haben aussagekräftige Beschriftungen

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.3.1

Radio-Buttons sind programmatisch mit Labels verknüpft

Bestanden

WCAG 1.3.1

Radio-Button-Gruppen verwenden fieldset und legend für semantische Struktur

Bestanden

WCAG 1.3.1

Fehlermeldung ist programmatisch mit Radio-Button-Gruppe verknüpft

Bestanden

WCAG 1.4.1

Radio-Button-Zustände werden nicht nur durch Farbe vermittelt

Bestanden

WCAG 1.4.6

Radio-Button-Labels erfüllen das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.11

Radio-Button-Rahmen heben sich mit mindestens 3:1 Kontrast ab

Bestanden

WCAG 2.1.1

Radio-Buttons sind vollständig per Tastatur bedienbar

Bestanden

WCAG 2.4.13

Radio-Buttons haben sichtbare Fokuszustände

Bestanden

WCAG 2.5.8

Radio-Buttons haben eine Mindestgröße von 24x24px

Bestanden

WCAG 4.1.2

Radio-Button-Zustände sind programmatisch erkennbar

Bestanden

WCAG 4.1.3

Fehlermeldung wird als Status-Nachricht gekennzeichnet

Siehe auch: BFIT Handreichungen