ARIA Checkbox

aria-checked allein macht noch keine Checkbox.

Eine eigene Checkbox braucht Rolle, zugänglichen Namen, aktuellen Zustand, Fokus und Leertasten-Bedienung. Für zwei Zustände ist natives HTML meist robuster.

01 / Zustandslabor

Eine ARIA-Checkbox brechen und reparieren.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Zustandslabor Ihnen.

Zustandslabor

Brechen. Bedienen. Reparieren.

Vertrag vollständig
Zustand setzen
Verträge

Interaktive Probe

Erwartete Ansage „Alle Benachrichtigungen, teilweise ausgewählt, Kontrollkästchen“

<span role="checkbox" aria-checked="mixed" aria-label="Alle Benachrichtigungen" tabindex="0">

Pass: Klick und Leertaste ändern denselben Zustand.

Teilweise ausgewählt. Alle vier Verträge sind erfüllt.

02 / Der Unterschied

Ein Checkbox-Muster ist der Anfang, nicht die Website.

  • Der Zustand ist nur ein Vertrag von vieren

    aria-checked ohne zugänglichen Namen, Fokus oder Leertasten-Bedienung bleibt für Screenreader und Tastatur ein totes Element. Der mixed-Zustand wird zudem oft gesetzt, obwohl eine Gruppenauswahl gemeint ist.

  • Auf der Website steht mehr als eine Checkbox

    Der Website-Check prüft Ihre Seiten auf ARIA-Muster ohne gültige Rolle, Namen oder Zustände – und auf weitere automatisch erkennbare Barrieren.

  • Fundstellen statt Musterkatalog

    Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Jetzt die eigene Seite prüfen.

Das Labor testet ein Checkbox-Muster. Der Website-Check prüft Ihre Seiten auf ARIA- Zustände und weitere automatisch erkennbare Barrieren.

Der Website-Check ist bereit.

  1. 1URL
  2. 2Auswahl
  3. 3Prüfung
  4. 4Ergebnis
Kostenlos starten · keine Installation

Die Checkbox steht. Jetzt die Seite dahinter prüfen.

Kostenlos starten: URL eingeben und konkrete technische Warnsignale mit Fundstellen erhalten.

Website auf Barrierefreiheit prüfen