Créer des commandes de switch accessibles

Utilisez l'attribut HTML switch sur <input type="checkbox" switch> avec un <label> associé pour créer un bouton d'activation/de désactivation binaire qui préserve l'envoi de formulaires natifs, la navigation au clavier et la sémantique du lecteur d'écran (voir Styling Checkboxes et Forms).

Annoter

Ajoutez l'attribut booléen switch à une entrée de case à cocher standard :

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

• Le libellé peut encapsuler l'entrée ou être associé à for/id. Tous les styles ciblent l'entrée, de sorte qu'ils ne dépendent pas de la structure du libellé.
• Lorsque cette option est cochée, l'entrée envoie sa valeur de case à cocher standard. En JavaScript, écoutez les événements change (ou input) et lisez .checked plutôt que .value.

Attribution d'un style

Personnalisez la couleur de mise en surbrillance de la commande à l'aide de accent-color (voir Formulaires conformes à la marque) et assurez-vous que le style de mise en évidence est visible :

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

Stratégies de remplacement

Solutions de remplacement et compatibilité des navigateurs avec switch-control

Si votre cible Baseline n'est pas compatible avec <input type="checkbox" switch>, ne chargez input-switch-polyfill que lorsque 'switch' in HTMLInputElement.prototype est false. Ne chargez pas le polyfill de manière inconditionnelle. Le polyfill améliore les cases à cocher avec l'attribut switch en définissant role="switch", en appliquant le style de bouton bascule (appearance: none), en synchronisant le accent-color calculé et en fournissant une compatibilité avec le glissement du pointeur.

Utilisez l'approche de chargement de package appropriée pour votre projet. L'exemple ci-dessous suppose que votre configuration peut résoudre les spécificateurs de module :

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

Solutions de remplacement et compatibilité des navigateurs pour accent-color

La propriété accent-color est une amélioration progressive. Les navigateurs qui ne sont pas compatibles avec cette propriété l'ignoreront et utiliseront les couleurs par défaut de leur UI.