Switch (Interrupteur)

Un interrupteur permet à un utilisateur d’activer ou de désactiver un élément. Il s’agit est en fait d’une simple case à cocher qui a été redesignée pour lui donner plus de poids visuel. Son fonctionnement est donc le même que celui d’une case à cocher.

Usage

L’interrupteur a un usage similaire à une case à cocher ou un bouton radio : faire un choix. La différence est que la bascule est instantanée. L’activation ou la désactivation de ce composant entraîne une action immédiate sans besoin de validation.

Spécifications

SipaUI propose 2 désign d’interrupteurs activés : par défaut un anthracite et un optionnel de la couleur du thème. Attention, la couleur de thème est à exclure si celle-ci est rouge : cela peut être interprété comme une information contradictoire !

• L’interrupteur doit être accompagné d’un texte ou d’une image expliquant son but.
• L’apparence du texte ou tout autre élément associé est constant quel que soit l’état de l’interrupteur.
• L’état souhaité (actif ou inactif) est appliqué par défaut.

Bonnes pratiques

• Généralement, le switch se situe après le texte.
• Le switch permet de choisir entre deux éléments. Ces éléments sont des titres courts, plutôt que des phrases. Le choix d’activer ou de désactiver doit être particulièrement clair grâce à un texte adapté et centré sur l’utilisateur.
• Ne pas ajouter de bouton pour valider le choix.

Style & code

Standard

Il y a 2 façons d’écrire une case à cocher en HTML : <input> DANS <label> ou <input> ET <label>. Il en va de même pour l’interrupteur. La première solution est préférable pour avoir un code plus léger, on peut ainsi poser la classe nécessaire su-switch directement sur le <label>. Toutefois, en incluant les 2 éléments dans un <div class="su-switch"> on peut utiliser la seconde méthode.

Voici les 4 cas possibles (les 2 méthodes avec la valeur du label avant ou après) :

<label for="checkbox1" class="su-switch">
    <input type="checkbox" id="checkbox1"><span>interrupteur 1</span>
</label>
<br />
<label for="checkbox2" class="su-switch">
    <span>interrupteur 2</span><input type="checkbox" id="checkbox2">
</label>
<br />
<div class="su-switch">
    <input type="checkbox" id="checkbox3" checked="checked">
    <label for="checkbox3">interrupteur 3</label>
</div>
<br />
<div class="su-switch">
    <label for="checkbox4">interrupteur 4</label>
    <input type="checkbox" id="checkbox4">
</div>

Par défaut, le label a l’apparence du texte standard. Il est bien sûr possible de changer cette apparence avec les balises ou les classes de texte comme <em> ou su-text-small…

Accessibilité

Les règles pour l’accessibilité sont les mêmes que celles pour les Checkboxes (cases à cocher) ou les Radio-buttons (boutons radio)  : il est possible de grouper des interrupteurs grâce à aria-labelledby=""…

Variations de couleurs

Comme vu plus haut, SipaUI offre 2 couleurs d’interrupteur actif : anthracite en standard et la couleur de thème si besoin. Pour changer cette couleur, il faut ajouter la classe su-theme à côté de la classe su-switch. Pour éviter les erreurs cette classe ne change rien sur le thème Ouest-France dont la couleur de thème est rouge (ce qui n’est pas autorisé pour des raisons UX).

<label for="checkbox5" class="su-switch">
    <input type="checkbox" id="checkbox5" checked="checked"><span>Standard</span>
</label>
<br />
<label for="checkbox6" class="su-switch su-theme">
    <input type="checkbox" id="checkbox6" checked="checked"><span>Thème</span>
</label>
<p>Avec le thème par défaut, le second interrupteur reste anthracite. Changez de thème pour voir l’effet.</p>

Minimal sans label

Il est possible d’utiliser une version simple, sans label, si le contexte l’exige et permet quand même la compréhension de ce que l’interrupteur valide (ou invalide), ou si l’explication ne peut être contenu dans ce label (image, texte long…). Toutefois, on doit quand même avoir un <label> explicite, pour des raisons d’accessibilité (pour que les lecteurs d’écran sachent ce qu’active cet interrupteur). C’est la classe .su-no-label à côté de su-switch qui permet alors de masquer celui-ci.

<label for="checkbox7" class="su-switch su-no-label">
    <input type="checkbox" id="checkbox7" checked="checked"><span>Activer la fonctionnalité</span>
</label>

Version inactive

Pour rendre un switch inactif il faut ajouter la classe su-disabled à côté de su-switch et l’attribut disabled plus la déclaration aria-readonly="true" pour l’accessibilité, à l’input.

<label for="checkbox8" class="su-switch su-disabled">
    <input type="checkbox" id="checkbox8" checked="checked" disabled aria-readonly="true"><span>label</span>
</label>
<br />
<div class="su-switch su-disabled">
    <label for="checkbox9">label</label>
    <input type="checkbox" id="checkbox9" disabled aria-readonly="true">
</div>