Ratgeber: Einen Umschaltknopf mit stabilem Namen und erkennbarem Zustand gestalten

Ein Zustand ist mehr als eine Hintergrundfarbe

Ein Knopf aktiviert eine Hervorhebung. Sehende Nutzer erkennen die Auswahl an einer anderen Farbe, eine Lesehilfe braucht jedoch eine verständliche Zustandsinformation. MDN beschreibt aria-pressed für Umschaltknöpfe und empfiehlt dabei einen stabilen Namen. Der zugängliche Name und der Zustand erfüllen unterschiedliche Aufgaben: Der Name sagt, worum es geht; der Zustand zeigt, ob die Funktion gerade eingeschaltet ist.

Die Art der Auswahl zuerst bestimmen

Prüfe, ob tatsächlich ein unabhängiger Ein-Aus-Knopf vorliegt. Eine Auswahl genau einer Größe aus mehreren Werten kann andere geeignete native Strukturen benötigen. Verwende nicht allein deshalb einen Umschaltknopf, weil ein vorhandenes CSS dafür hübsch aussieht. Beschreibe das gewünschte Verhalten einschließlich Tastaturbedienung und Anfangszustand. Eine fehlende gespeicherte Auswahl darf nicht willkürlich als erfolgreiche frühere Zustimmung erscheinen. Der dargestellte Zustand muss zum tatsächlichen Anwendungswert passen.

Name und Zustand konsistent halten

Wenn du einen entsprechend bezeichneten Toggle verwendest, soll sein Name beim Umschalten dieselbe Funktion bezeichnen. Der gedrückte Zustand wird gesondert aktualisiert. Prüfe außerdem, ob die eigentliche Wirkung wirklich eintritt: Eine aktiv aussehende Hervorhebung ohne passende Datenänderung ist irreführend. Umgekehrt darf ein fehlgeschlagenes Speichern nicht als dauerhaft aktiv bestätigt werden. Ein temporärer lokaler Zustand und eine gespeicherte Kontoeinstellung müssen klar auseinandergehalten werden.

Die Abnahme ohne Farbhinweis durchführen

Bediene den Knopf ausschließlich mit Tastatur und prüfe mit einer geeigneten Lesehilfe den angekündigten Namen und Zustand. Öffne die Ansicht erneut und kontrolliere die beabsichtigte Dauerhaftigkeit. Dokumentiere getrennt, ob nur die Oberfläche oder auch die Speicherung geprüft wurde. ARIA ergänzt Bedeutung, ersetzt aber keine funktionierende Bedienlogik. Eine gelungene Umsetzung erklärt ihre aktuelle Wirkung über mehrere Zugangswege. Sie behauptet weder eine erfolgte Speicherung ohne Antwort noch eine Auswahl, die lediglich durch einen farbigen Rand angedeutet wird.

Vergleiche den sichtbaren Schalterzustand mit seiner tatsächlichen Wirkung. Ist ein Filter aktiv markiert, müssen die angezeigten Ergebnisse dazu passen. Wenn eine Anfrage scheitert, sollte die Oberfläche die Abweichung verständlich benennen. Eine rein optische Zustandsänderung genügt für einen bedienbaren Schalter nicht.