Accessibilité avec JavaScript
L'accessibilité en JavaScript veut dire que la commande marche au clavier et qu'un changement d'état est annoncé. Cette page utilise un vrai bouton. Un click met la ligne visible à tea / regular.
Ce n'est pas la page des erreurs
La page précédente a lancé missing size. Sa ligne se lisait caught / missing size. Cette page n'utilise pas throw. Le contrôle reste sur la page, et le résultat s'écrit là où on le voit.
Utilise un bouton
<button type="button"> lance son écouteur click pour un clic de souris, pour Enter et pour Space. Un div qui n'écoute que click ignore le clavier. Le texte du bouton est le nom qu'on entend.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
La ligne devient tea / regular. Enter et Space lancent le même écouteur.
Annonce la nouvelle ligne
textContent met l'écran à jour. Un lecteur d'écran peut manquer un changement silencieux. aria-live="polite" lui demande de dire le nouveau texte après la phrase en cours.
<p id="line" aria-live="polite">…</p>
Le changement est annoncé, et il ne coupe pas la phrase en cours. assertive interrompt. Cette page utilise polite.
Sans size, le bouton est désactivé
La commande est { drink: "tea" } et size manque. Mets button.disabled à true. Le bouton reste visible. L'écouteur click ne s'exécute pas.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
Le bouton est encore dans la page, et il ne passe pas la commande. Ne retire pas l'élément.
Laisse le focus sur le bouton
La personne qui a activé le bouton est déjà là. Écris la ligne, puis appelle button.focus(). N'appelle pas line.focus(), et ne cache pas le contour.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
Le focus reste sur le bouton. La ligne n'a pas besoin de tabindex. Le contour reste visible.
Quatre habitudes
Chaque rangée est une décision pour ce contrôle de commande.
📊 Commande accessible
| Habitude | Utiliser | Éviter |
|---|---|---|
| Action | button avec type="button" |
un div qui n'écoute que click |
| Statut | aria-live="polite" sur la ligne |
un échange de texte silencieux |
| Indisponible | button.disabled = true |
retirer le bouton |
| Foyer | button.focus() et un contour visible |
line.focus() ou outline: none |
Un bouton prend l'action. La ligne en direct dit le résultat. disabled garde un contrôle qui ne peut pas s'exécuter. Le contour montre où est le focus.
La ligne de la page
La page relie un bouton à la ligne en direct. Rien n'est lancé.
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
Après le click, la ligne se lit tea / regular. Enter et Space font la même chose. caught / missing size appartenait à la page des erreurs.
Au comptoir
- Clique le bouton. La ligne se lit tea / regular.
- Appuie sur Enter sur le même bouton. L'écouteur repart.
- Mets aria-live="polite" sur la ligne pour que le nouveau texte soit annoncé.
- Sans size, mets button.disabled à true. Le bouton reste, et click ne s'exécute pas.
- Après un click réussi, appelle button.focus(). N'appelle pas line.focus().
Ratés fréquents
Un click sur un div n'est pas un contrôle clavier. disabled n'est pas la même chose que supprimer le bouton.
- Utiliser un
divpour l'action de commande - Mettre la ligne à jour et oublier
aria-live - Retirer le bouton quand
sizemanque - Appeler
line.focus()après une commande réussie - Cacher le contour du focus
- Lire la ligne comme caught / missing size
Garde ceci
- Un
buttonlance la commande à la souris, avec Enter et avec Space aria-live="polite"annoncetea / regularsans interrompre- Sans
size,button.disabledvauttrueet le bouton reste dans la page - Le focus reste sur le bouton
- La ligne de la page est tea / regular
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut