Problem mit Toggle-Button

[Gunnar Bittersmann]

@@jbaben

ich habe mir von dieser Seite On/Off FlipSwitch einen Toggle-Button erstellt:

Welcher nicht funktioniert. Nicht mit Tastatursteuerung. Die Macher haben folgenden schwerwiegenden Fehler gemacht:
.onoffswitch-checkbox { display: none; }

Interaktive Elemente dürfen – wenn sie denn funktionieren sollen – niemals mit display: none oder visibility: hidden versteckt, sondern nur visuell versteckt werden.

Wenn du stattdessen

.onoffswitch-checkbox
{
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

angibst, sollte das Ding auch per Tastatur bedienbar sein.

Es ist aber immer noch kein Button. Screenreader lesen eine Checkbox vor.

Ich empfehle die Lektüre von Heydons Artikel zu Toggle-Buttons. Darin zeigt er auch, wie das mit <button> geht.

Wenn ich für den zeiten Toggle-Button anstatt "onoffswitch" "onoffswitch_L" verwende und folgenden HTML-Code verwende:

Online-Beispiel, bitte.

LLAP 🖖