Toegankelijke schakelaarbediening maken

Gebruik het HTML-kenmerk switch op <input type="checkbox" switch> met een bijbehorende <label> om een binaire aan/uit-schakelaar te maken die de semantiek van native formulierinzending, toetsenbordnavigatie en schermlezers behoudt (zie Styling Checkboxes en Forms).

Opmaak

Voeg het Booleaanse kenmerk switch toe aan een standaard invoer voor selectievakjes:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>

• Het label kan de invoer omvatten of worden gekoppeld aan for/id. Alle opmaak is gericht op de invoer, dus is niet afhankelijk van de labelstructuur.
• Als dit is aangevinkt, dient de invoer de standaard selectievakjeswaarde in. Luister in JavaScript naar change-gebeurtenissen (of input-gebeurtenissen) en lees .checked in plaats van .value.

Stijl

Pas de markeringskleur van het bedieningselement aan met accent-color (zie Formulieren die consistent zijn met het merk) en zorg voor een zichtbare focusstijl:

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;
}

Reservestrategieën

Fallbacks en browserondersteuning voor schakelaars

Als je Baseline-doel <input type="checkbox" switch> niet ondersteunt, laad je input-switch-polyfill alleen als 'switch' in HTMLInputElement.prototype false is. Laad de polyfill niet onvoorwaardelijk. De polyfill verbetert selectievakjes met het kenmerk switch door role="switch" in te stellen, schakelaarstijl (appearance: none) toe te passen, berekende accent-color te synchroniseren en ondersteuning voor slepen met de muisaanwijzer te bieden.

Gebruik de methode voor het laden van pakketten die geschikt is voor uw project. In het voorbeeld hieronder wordt ervan uitgegaan dat je instellingen modulespecificaties kunnen oplossen:

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

Fallbacks en browserondersteuning voor accent-color

De property accent-color is progressive enhancement. Browsers die deze property niet ondersteunen, negeren deze en gebruiken de standaard UI-kleuren.