Toggle-Switches & Custom-Checkboxen

Eigene Schalter und schick gestaltete Checkboxen sind beliebt – und eine häufige Barrierefalle. Der Grund ist fast immer derselbe: Das native Bedienelement wird durch ein <div> mit Klick-Handler ersetzt und verliert dabei Fokus, Tastatur und korrekte Ansage. Die erste Regel von ARIA zeigt den besseren Weg: das native Element behalten und nur sein Aussehen ändern.

Custom-Checkboxen & Radios: nativ stylen

Du brauchst kein Nachbau – ein echtes <input> lässt sich vollständig gestalten, ohne seine Funktion aufzugeben. Das Muster: natives Input behalten, optisch ausblenden, optischen Ersatz danebenstellen, über das verknüpfte Label bedienbar machen.

<input type="checkbox" id="newsletter" class="visually-hidden" />
<label for="newsletter">Newsletter abonnieren</label>

/* Optischer Ersatz, gesteuert vom echten Input-Zustand */
input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 4px;
}
input[type="checkbox"]:checked + label::before { background: var(--color-primary); }
input[type="checkbox"]:focus-visible + label::before { outline: 3px solid var(--color-focus); }

So bleiben Tastaturbedienung (Leertaste), Zustand und Gruppierung erhalten. Für Gruppen von Radios oder Checkboxen kommt fieldset und legend dazu.

Toggle-Switch: zwei legitime Wege

Ein Schalter („an/aus“) lässt sich auf zwei korrekte Arten umsetzen:

• Checkbox mit role="switch" – wenn es ein Formularfeld ist, das abgeschickt wird. role="switch" sagt „an/aus“ statt „angehakt“.

  <input type="checkbox" role="switch" id="darkmode" />
  <label for="darkmode">Dunkles Design</label>

• Button mit aria-pressed – wenn der Schalter sofort etwas tut (Sofort-Aktion ohne Absenden).

  <button type="button" aria-pressed="false">Benachrichtigungen</button>

Randnotiz – Zustand ansagen, nicht nur färben. Ein Schalter, der seinen Zustand nur über Farbe oder Position zeigt, ist für Screenreader stumm und für Farbfehlsichtige mehrdeutig. role="switch"/aria-pressed liefern die Ansage „ein/aus“; ein zusätzliches Textlabel oder Icon macht den Zustand auch sichtbar unabhängig von der Farbe.

Häufige Fehler

• <div> statt <input>/<button> – Fokus und Tastatur fehlen.
• Natives Input mit display:none versteckt – dann ist es gar nicht mehr fokussierbar. Nutze stattdessen .visually-hidden.
• Zustand nur per Farbe ohne Text/Ansage.
• Toggle ohne role="switch"/aria-pressed – der Zustand bleibt unhörbar.
• Kein sichtbarer Fokus auf dem gestalteten Ersatz.

Häufige Fragen

Checkbox oder Switch – wann was?

Ein Switch ist ein Sonderfall der Checkbox für „an/aus“, der oft sofort wirkt (z. B. Dunkelmodus). Geht es um eine Auswahl, die erst beim Absenden zählt, ist die normale Checkbox passender.

role="switch" oder aria-pressed?

role="switch" gehört auf ein Formular-Input, das einen Zustand speichert. aria-pressed gehört auf einen Button, der eine Aktion sofort umschaltet. Beides ist korrekt – je nach Funktion.

Wie verstecke ich das native Input richtig?

Mit einer .visually-hidden-Klasse (positioniert, 1×1 px, clip), nicht mit display:none oder visibility:hidden – sonst verliert es Fokus und Funktion.

Fazit

Schalter und eigene Checkboxen baust du am besten nicht nach: Behalte das native <input> oder <button>, blende es sauber aus und gestalte einen optischen Ersatz. Den Zustand machst du mit role="switch" bzw. aria-pressed hörbar und nicht nur farblich sichtbar. So bleibt alles tastaturbedienbar – ganz im Sinne der ersten Regel von ARIA.