Barrierefreie Schaltersteuerungen erstellen

Webfunktionen: <input type="checkbox" switch> accent-color

Verwenden Sie das HTML-Attribut switch für <input type="checkbox" switch> mit einem zugehörigen <label>, um einen binären Ein/Aus-Schalter zu erstellen, der die native Formularübermittlung, die Tastaturnavigation und die Screenreader-Semantik beibehält (siehe Styling Checkboxes und Forms).

Markieren & Zeichnen

Fügen Sie einer Standardeingabe mit Kästchen das boolesche Attribut switch hinzu:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • Das Label kann die Eingabe umschließen oder mit for/id verknüpft sein. Alle Stile beziehen sich auf die Eingabe und sind daher nicht von der Labelstruktur abhängig.
  • Wenn diese Option aktiviert ist, wird der Standardwert des Kästchens gesendet. Warten Sie in JavaScript auf change- (oder input-)Ereignisse und lesen Sie .checked statt .value.

Stile

Passen Sie die Hervorhebungsfarbe des Steuerelements mit accent-color an (siehe Markenkonsistente Formulare) und sorgen Sie für ein sichtbares Fokus-Styling:

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

Fallback-Strategien

Fallbacks und Browserunterstützung für „switch-control“

Wenn Ihr Baseline-Ziel <input type="checkbox" switch> nicht unterstützt, laden Sie input-switch-polyfill nur, wenn 'switch' in HTMLInputElement.prototype den Wert false hat. Laden Sie das Polyfill nicht bedingungslos. Das Polyfill erweitert Kästchen mit dem Attribut switch, indem es role="switch" festlegt, das Schalter-Styling (appearance: none) anwendet, berechnete accent-color synchronisiert und die Unterstützung für das Ziehen mit dem Zeiger bietet.

Verwenden Sie die für Ihr Projekt geeignete Methode zum Laden von Paketen. Im folgenden Beispiel wird davon ausgegangen, dass Ihre Einrichtung Modulspezifizierer auflösen kann:

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

Fallbacks und Browserunterstützung für „accent-color“

Das Attribut accent-color ist eine progressive Verbesserung. Browser, die diese Eigenschaft nicht unterstützen, ignorieren sie und verwenden ihre Standard-UI-Farben.