Barrierefreie Radiobuttons und Checkboxen

Aktualisiert am 14. Oktober 2026 · Lesezeit: 5 Min.

Radiobuttons und Checkboxen gehören zu den einfachsten Bedienelementen in HTML – und zu den am häufigsten kaputten in Shops, weil Designer eigene Farbfelder, Schalter und Filter-Chips wollen. Diese Seite zeigt, wie sie barrierefrei bleiben. Sie gehört zur Reihe barrierefreie UI-Muster.

Wann welches Element

Radiobuttons	Checkboxen
Genau eine Wahl aus einer Menge: Versandart, Zahlungsart, Größe	Jede Option unabhängig an oder aus: Filter, Newsletter-Einwilligung, Geschenkverpackung
Eine Option ist meist vorausgewählt	Beliebig viele können angehakt sein, auch keine

Das APG beschreibt eine Radiogruppe als Menge ankreuzbarer Buttons, bei der „höchstens einer der Buttons gleichzeitig angekreuzt sein kann“, und Checkboxen als Elemente mit zwei Zuständen (angehakt oder nicht) oder drei Zuständen, mit einem zusätzlichen teilweise angehakten Zustand – zum Beispiel „Alle auswählen“, wenn nur einige Einträge ausgewählt sind.

Relevante WCAG-Kriterien

1.3.1 Info und Beziehungen (A): Die Gruppe und ihre Frage müssen im Code stehen, nicht nur im Layout.
3.3.2 Beschriftungen oder Anweisungen (A): Jede Option hat ein Label; die Gruppe hat eine Frage.
4.1.2 Name, Rolle, Wert (A): Rolle, Name und Auswahlzustand werden bereitgestellt.
2.1.1 Tastatur (A) und 2.4.7 Fokus sichtbar (AA).
1.4.11 Nicht-Text-Kontrast (AA): Das Kästchen oder der Kreis und der angehakte Zustand brauchen 3:1 Kontrast.
2.5.8 Zielgröße (Minimum) (AA): Ein anklickbares Label vergrößert das Ziel.
3.2.2 Bei Eingabe (A): Die Auswahl einer Option darf den Kontext nicht unerwartet ändern, etwa die Seite neu laden und in ein anderes Land wechseln.

Codebeispiel

<fieldset>
  <legend>Versandart</legend>

  <input type="radio" id="ship-courier" name="shipping" value="courier" checked>
  <label for="ship-courier">Kurier, 1–2 Tage, 6,90 €</label>

  <input type="radio" id="ship-locker" name="shipping" value="locker">
  <label for="ship-locker">Paketstation, 2–3 Tage, 3,90 €</label>
</fieldset>

<fieldset>
  <legend>Farbe</legend>
  <!-- Swatches: the real input stays, only its look changes -->
  <input type="radio" id="c-navy" name="colour" value="navy" class="swatch-input">
  <label for="c-navy" class="swatch" style="--swatch:#1f2a44">Marineblau</label>
</fieldset>

<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Ich akzeptiere die <a href="/de/agb">allgemeinen Geschäftsbedingungen</a></label>

Hinweise:

fieldset und legend sind die W3C-Technik H71. Sie sagt, dass sie bei Radiobuttons und Checkboxen mit gemeinsamem Feldnamen am wichtigsten sind und nicht nötig, wenn die einzelnen Labels die Frage schon klar machen.
Behalten Sie bei Farbfeldern den Text „Marineblau“ im Label (bei Bedarf optisch verborgen), damit die Farbe nicht allein durch Farbe vermittelt wird.
Verbergen Sie das native Eingabefeld optisch mit einer Clip-Technik, niemals mit display: none oder visibility: hidden, die es für Tastatur und Screenreader entfernen. Machen Sie den Fokusrahmen am Label sichtbar, wenn das Eingabefeld den Fokus hat.
Bauen Sie ein eigenes Bedienelement ohne natives Eingabefeld, verwendet das APG-Muster role="radiogroup" mit Kindern role="radio" oder role="checkbox", aria-checked (true, false und bei Checkboxen mixed), eine Beschriftung für die Gruppe und vollständige Tastaturunterstützung, die Sie selbst schreiben. Das native Eingabefeld ist weit einfacher.

Tastaturbedienung

Aus den APG-Mustern für Radiogruppen und Checkboxen:

Taste	Radiogruppe	Checkbox
Tab / Umschalt + Tab	Bewegt den Fokus in die Gruppe hinein und heraus (ein Tab-Stopp für die Gruppe)	Springt zur nächsten oder vorherigen Checkbox
Pfeiltasten	Wechseln zur nächsten oder vorherigen Option und wählen sie aus, an den Enden umlaufend	—
Leertaste	Wählt die fokussierte Option, wenn sie nicht ausgewählt ist	Schaltet zwischen angehakt und nicht angehakt um

In einer Toolbar, so das APG, bewegen die Pfeiltasten den Fokus, ohne die ausgewählte Option zu ändern, und die Leertaste wählt sie aus.

Typische Fehler in Online-Shops

Farb- und Größenfelder, gebaut als div oder span mit Klick-Handlern – keine Rolle, keine Tastatur, kein Zustand.
Das native Eingabefeld mit display: none verborgen hinter einem schön gestalteten Label.
Filter als Checkboxen, die bei jedem Klick die Seite ohne Warnung neu laden und den Fokus an den Anfang setzen.
Gruppen ohne Frage: „Ja / Nein“-Radiobuttons, deren Frage nur eine optische Überschrift ist.
Ein angehakter Zustand, der nur durch einen dünnen Farbwechsel des Rahmens mit geringem Kontrast gezeigt wird, oder bei Farbfeldern nur durch Farbe.
Der Text „Ich akzeptiere die AGB“ ist nicht mit der Checkbox verbunden, sodass ein Klick auf den Text nichts bewirkt und der Screenreader „Kontrollkästchen, nicht angehakt“ ohne Namen vorliest.
Winzige Ziele für Checkboxen in Filterlisten auf Mobilgeräten.

Was automatische Prüfungen finden und was manuell zu testen ist

Automatisch (axe-core-Regel)	Was sie findet
`label`	Eingabefelder ohne Label
`aria-toggle-field-name`	Eigene `role="checkbox"`, `radio` oder `switch` ohne Namen
`form-field-multiple-labels`	Ein Feld mit mehr als einem Label
`aria-required-attr`	Eine eigene Checkbox oder ein eigener Radiobutton ohne `aria-checked`
`aria-required-parent`	ARIA-Rollen, die in einer bestimmten übergeordneten Rolle stehen müssen, außerhalb davon verwendet
`nested-interactive`	Ein Link oder Button in einem eigenen Bedienelement
`color-contrast`, `target-size`	Label-Text mit geringem Kontrast, zu kleine Ziele

Alle sind Karten in unserer Regelbibliothek. Manuelle Tests sind nötig für das Tastaturverhalten (Pfeiltasten in Gruppen, Leertaste), den sichtbaren Fokus bei eigenen Farbfeldern, den Kontrast von Kästchen und angehaktem Zustand (1.4.11), die Frage, ob jede Gruppe eine klare Frage hat, und ob die Auswahl einer Option den Kontext ändert. Der Kontrast-Checker hilft beim Nicht-Text-Kontrast.

Testen Sie eine Produktseite mit der kostenlosen Prüfung einer Seite. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Wann verwende ich Radiobuttons und wann Checkboxen?

Radiobuttons, wenn aus einer Gruppe genau eine Option gewählt werden kann, etwa die Versandart. Checkboxen, wenn jede Option für sich an oder aus sein kann, etwa Filter oder „Ich akzeptiere die AGB“.

Brauchen Radiobuttons ein fieldset und legend?

Meistens ja. Die W3C-Technik H71 sagt, fieldset und legend sind am wichtigsten bei Radiobuttons und Checkboxen, die eine gemeinsame Frage teilen, weil die einzelnen Labels nicht sagen, was die Frage ist. Nötig ist es nicht, wenn die Labels allein klar sind.

Wie bedienen Tastaturnutzer eine Radiogruppe?

Tab führt in die Gruppe hinein und wieder heraus, die Pfeiltasten wechseln zwischen den Optionen und wählen sie aus, und die Leertaste wählt die fokussierte Option. Das ist das Verhalten nativer Radiobuttons und des APG-Musters für Radiogruppen.

Kann ich Checkboxen mit eigenem Styling verwenden?

Ja, wenn das echte input auf der Seite bleibt und sich nur sein Aussehen ändert. Wird das input mit display none verborgen und stattdessen ein div gezeichnet, ist es für Tastatur und Screenreader verschwunden.

Kann eine automatische Prüfung Radiobuttons und Checkboxen testen?

Sie findet Eingabefelder ohne Label, eigene Checkboxen ohne Namen und Felder mit mehreren Labels. Sie kann nicht beurteilen, ob eine Gruppe eine klare Frage hat oder ob ein eigenes Bedienelement per Tastatur funktioniert.

Quellen

W3C WAI, APG Radio Group pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
W3C WAI, APG Checkbox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
W3C, Technique H71 fieldset and legend: https://www.w3.org/WAI/WCAG22/Techniques/html/H71