Components Toggle Schalter
| Design System | Barrierefreiheit | Fertigstellungsgrad |
|---|---|---|
| 100% V25 | 100% | 100% |
Toggle Beschreibung
Ein Toggle verwendet man für eine einzelne Option, die der Nutzer an- oder abschalten kann. Der Nutzer kann einfach und schnell zwischen zwei Zuständen hin- und her zu schalten.
Toggle Zustände
On
Keybord Focus
Sollte kein Focus auf diesem Element liegen, so wurde dieser nach dem Laden der Seite neu gesetzt. Laden Sie die Seite neu
Off
Disabled
Wir empfehlen die Toggle nicht disabled darzustellen.
Barrierefreiheit wird nicht erfüllt, weil die Toggle nicht fokussiert werden kann.
Bitte verwenden in diesem Fall, die Schreibgeschützte(readonly) Version des Toggles.
Hier sehen Sie nur ein Beispiel, wie ein disabled Toggle aussieht.
Disabled On
Disabled Off
Readonly
type="checkbox" und darf kein readonly attribure haben!
Damit Toggle wir "Disabled" aussehen, durch den Benutzer nicht verändert werden können,
aber mit dem Formularer übermittelt werden,
sollen die mit einer readonly class ausgestattet werden!
Damit die Screenreader das Element als "schreibgeschützt" ausgeben, ist das Attribute aria-readonly="true" zu setzen.
<input type="checkbox" class="switch readonly" aria-readonly="true" id="switch" name="switch">
Readonly On
Readonly Off
Hint
Bei einzelnen Toggels entfällt der Hilfstext!
Wähle mindestens eine Operation aus
Wähle mindestens eine Operation aus
Optional
Error
Elemente mit Error und Hint Meldungen müssen mit aria-describedby="error-id hint-id" Attribut ausgezeihnet werden!
<input type="checkbox" aria-describedby="xxx">
Auswahl erforderlich
Toggle mit Label oberhalb
Toggle mit Label links
Label
Liste mit Toggles
Error für Liste mit Toggles
Elemente mit Error und Hint Meldungen müssen mit aria-describedby="error-id hint-id" Attribut ausgezeihnet werden!
<fieldset aria-describedby="xxx">
<