ARIA : rôle switch

Description

Le rôle switch est identique au rôle checkbox, sauf qu'au lieu d'être « coché » ou « non coché », il est soit « activé », soit « désactivé ». Comme pour le rôle checkbox, l'attribut aria-checked est obligatoire. Les deux valeurs possibles sont true et false. Contrairement à <input type="checkbox"> ou role="checkbox", il n'existe pas d'état indeterminate ou mixed. Le rôle switch ne prend pas en charge la valeur mixed pour l'attribut aria-checked : lui attribuer la valeur mixed revient à la définir sur false.

Les technologies d'assistance peuvent choisir de représenter les widgets switch avec une présentation spécialisée pour refléter la notion d'interrupteur activé/désactivé.

Puisqu'un switch est un contrôle interactif, il doit être sélectionnable et accessible au clavier. Si le rôle est appliqué à un élément non sélectionnable, utilisez l'attribut tabindex pour le rendre sélectionnable. Le raccourci clavier attendu pour basculer la valeur d'un switch est la touche Espace. Le·la développeur·euse doit modifier dynamiquement la valeur de l'attribut aria-checked lorsque le switch est basculé.

Tous les descendants sont des éléments de présentation

Certains composants d'interface utilisateur, lorsqu'ils sont représentés dans une API d'accessibilité de plate-forme, ne peuvent contenir que du texte. Les API d'accessibilité n'ont pas de moyen de représenter des éléments sémantiques contenus dans un switch. Pour contourner cette limitation, les navigateurs appliquent automatiquement le rôle presentation à tous les éléments descendants d'un élément switch, car ce rôle ne prend pas en charge les enfants sémantiques.

Par exemple, considérez l'élément switch ci‑dessous qui contient un titre :

<div role="switch"><h3>Titre de mon interrupteur</h3></div>

Étant donné que les descendants d'un switch sont présentiels, le code suivant est équivalent :

<div role="switch"><h3 role="presentation">Titre de mon interrupteur</h3></div>

Du point de vue de l'utilisateur·ice de technologie d'assistance, le titre n'existe pas puisque les extraits précédents sont équivalents à ce qui suit dans l'arbre d'accessibilité :

<div role="switch">Titre de mon interrupteur</div>

Propriétés, états et rôles ARIA associés

l'attribut aria-checked

L'attribut aria-checked est obligatoire avec le rôle switch, car il représente l'état courant du widget auquel le rôle est appliqué. La valeur true représente l'état « activé » ; false représente l'état « désactivé » ; la valeur mixed n'est pas prise en charge par le rôle switch et est traitée comme false.

l'attribut aria-readonly

L'attribut aria-readonly est pris en charge par le rôle switch. Il indique si l'état du widget est modifiable par l'utilisateur·ice. La valeur false signifie que l'utilisateur·ice peut modifier l'état du widget ; la valeur true signifie que l'utilisateur·ice ne peut pas modifier l'état du widget. La valeur par défaut est false.

Fonctionnalités JavaScript requises

Gestionnaire d'événements de clic

Lorsqu'un·e utilisateur·ice clique sur le widget switch, un événement de clic est déclenché, qui doit être géré pour modifier l'état du widget.

Modification de l'attribut aria-checked

Lorsqu'un événement de clic est déclenché sur le widget switch, le gestionnaire doit modifier la valeur de l'attribut aria-checked de true à false, ou inversement.

Effets possibles sur les agents utilisateur·ice·s et les technologies d'assistance

Lorsque le rôle switch est ajouté à un élément, l'agent utilisateur le gère ainsi :

• L'élément est exposé à l'infrastructure d'accessibilité du système comme ayant le rôle switch.
• Lorsque la valeur de l'attribut aria-checked change, un événement d'accessibilité est déclenché via l'API d'accessibilité du système si elle existe et prend en charge le rôle switch.
• Tous les éléments descendants d'un élément auquel le rôle switch est appliqué reçoivent automatiquement le rôle presentation. Cela empêche les éléments utilisés pour construire le switch d'être interagis individuellement par les technologies d'assistance. Le texte de ces éléments reste visible pour l'agent utilisateur·ice et peut être lu ou transmis à l'utilisateur·ice, sauf s'il est explicitement masqué via display: none ou aria-hidden="true".

La technologie d'assistance, si elle prend en charge le rôle switch, réagit ainsi :

• Les lecteurs d'écran doivent annoncer l'élément comme un interrupteur, en fournissant éventuellement des instructions sur la façon d'activer le switch.

Exemples

Les exemples suivants vous aideront à comprendre comment appliquer et utiliser le rôle switch.

Ajouter le rôle switch en ARIA

Cet exemple crée un widget et lui attribue le rôle ARIA switch. Le bouton est stylisé pour ressembler à un interrupteur marche/arrêt.

HTML

Un switch est implémenté comme un élément <button>, qui est initialement activé grâce à son attribut aria-checked défini sur "true". Le switch possède deux éléments enfants contenant les libellés « éteint » et « allumé », et est suivi d'un élément <label> identifiant le switch.

<button role="switch" aria-checked="true" id="speakerPower" class="switch">
  <span>éteint</span>
  <span>allumé</span>
</button>
<label for="speakerPower" class="switch">Alimentation du haut-parleur</label>

JavaScript

Ce code JavaScript définit et applique une fonction pour gérer les événements de clic sur les widgets switch. La fonction modifie l'attribut aria-checked de true à false, ou inversement.

document.querySelectorAll(".switch").forEach((theSwitch) => {
  theSwitch.addEventListener("click", handleClickEvent);
});

function handleClickEvent(evt) {
  const el = evt.target;

  if (el.getAttribute("aria-checked") === "true") {
    el.setAttribute("aria-checked", "false");
  } else {
    el.setAttribute("aria-checked", "true");
  }
}

CSS

Le but du CSS est de donner au switch une apparence proche de celle d'un interrupteur d'alimentation.

button.switch {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 26px;
  border: 2px solid black;
  display: inline-block;
  margin-right: 0.25em;
  vertical-align: middle;
  text-align: center;
  font:
    12px / 20px "Open Sans",
    "Arial",
    serif;
}

button.switch span {
  padding: 0 4px;
  pointer-events: none;
}

[role="switch"][aria-checked="false"] :first-child,
[role="switch"][aria-checked="true"] :last-child {
  background: #226622;
  color: #eeeeff;
}

[role="switch"][aria-checked="false"] :last-child,
[role="switch"][aria-checked="true"] :first-child {
  color: #bbbbdd;
}

label.switch {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
  line-height: 20px;
  vertical-align: middle;
  user-select: none;
}

La partie la plus intéressante est probablement l'utilisation des sélecteurs d'attributs et des pseudo-classes :first-child et :last-child pour modifier l'apparence du switch selon qu'il est activé ou désactivé.

Résultat

Le résultat ressemble à ceci :

Spécifications

Voir aussi

• ARIA : rôle checkbox
• <input type="checkbox">
• L'attribut ARIA aria-hidden