Handicap moteur — Accessibilité numérique

Comprendre

Qu'est-ce que le handicap moteur dans le contexte numérique ?

Le handicap moteur couvre un spectre très large : tremblements essentiels, Parkinson, sclérose en plaques, tétraplégie, paraplégie, hémiplégie, amputation, douleurs chroniques limitant les mouvements. Chaque situation conduit à des adaptations différentes pour accéder au numérique.

Les technologies d'assistance utilisées sont variées : navigation au clavier seul, commande vocale (Dragon NaturallySpeaking), contacteurs à un seul bouton (switch access), trackball, joystick, système de suivi oculaire (eye tracking), ou souris alternative. Votre site doit fonctionner 100% sans souris.

⌨️ Navigation clavier

Toutes les fonctionnalités accessibles avec Tab, Entrée, Échap, flèches
Focus visible à chaque élément interactif
Pas de piège clavier (modale sans fermeture au clavier)
Raccourcis clavier documentés

🎯 Taille des cibles

Minimum 44×44px pour tous les éléments cliquables
Espacement suffisant entre les boutons (pas de boutons collés)
Liens textuels larges plutôt qu'icônes minuscules
Zones de clic étendues aux libellés des checkboxes

⏱️ Temps et délais

Pas de double-clic obligatoire
Délais d'expiration ajustables (WCAG 2.2.1)
Pas de drag-and-drop sans alternative clavier
Gestes complexes évités ou avec alternative

🖱️ Pointage

Actions au relâchement du clic (pas au pressé) — WCAG 2.5.2
Éviter les survols nécessaires pour révéler des contenus
Les menus au survol ont une alternative au focus clavier
Pas de contenu qui disparaît au déplacement de la souris

Code

Implémentation technique : navigation clavier complète

Focus visible obligatoire — C'est le critère WCAG 2.4.7 (AA) le plus souvent cassé par les CSS :

/* ✗ L'erreur la plus fréquente — NE JAMAIS FAIRE */
* { outline: none; }
:focus { outline: none; }

/* ✓ Focus visible uniquement pour la navigation clavier */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
  border-radius: 3px;
  /* ratio 7:1 sur fond blanc — dépasse les exigences WCAG 2.4.11 */
}
:focus:not(:focus-visible) { outline: none; }

/* ✓ Taille de cible minimale (WCAG 2.5.5 — AA) */
button, a, input, select, textarea, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}
/* Pour les boutons inline : étendre la zone de clic */
.btn-icon {
  padding: 10px;
  display: inline-flex;
  align-items: center;
}

Skip link (lien d'évitement) — WCAG 2.4.1 (A) : le premier élément focusable de toute page :

<!-- Premier élément dans le body — WCAG 2.4.1 obligatoire -->
<a href="#contenu-principal" class="skip-link">
  Aller au contenu principal
</a>

/* Invisible sauf au focus clavier */
.skip-link {
  position: absolute;
  top: -100px; left: 16px; z-index: 9999;
  background: #1a1a2e; color: #fff;
  padding: 10px 18px; border-radius: 0 0 6px 6px;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }

Action au relâchement du clic — WCAG 2.5.2 (A) :

// ✗ Mauvais : action immédiate au pressé (mousedown)
bouton.addEventListener("mousedown", supprimerFichier);

// ✓ Correct : action au relâchement (click = mouseup + même élément)
bouton.addEventListener("click", supprimerFichier);
// Le HTML natif <button> fait déjà ça correctement
// Ne PAS utiliser mousedown/pointerdown pour des actions destructives

WCAG 2.2 & RGAA 4.1

Critères clés pour le handicap moteur

WCAG 2.1.1 — A Clavier : toutes les fonctionnalités disponibles à la souris doivent l'être au clavier. Le critère le plus fondamental pour le handicap moteur.

WCAG 2.1.2 — A Pas de piège clavier : l'utilisateur peut toujours sortir d'un composant au clavier. Les modales sans fermeture par Échap sont un piège classique.

WCAG 2.4.7 — AA Focus visible : tout composant qui reçoit le focus clavier doit avoir un indicateur visuel. La suppression de l'outline CSS est la violation la plus répandue.

WCAG 2.5.2 — A Annulation du pointeur : pour les fonctions à un seul clic, l'action est déclenchée au relâchement (up-event) et peut être annulée en déplaçant le curseur hors de la cible.

WCAG 2.5.5 — AA Taille de la cible : chaque cible d'activation mesure au minimum 44×44 pixels CSS, ou dispose d'un espace équivalent autour d'elle.

WCAG 2.4.1 — A Bypass blocks : un lien d'évitement permet de sauter la navigation répétée et d'accéder directement au contenu. Critique pour les utilisateurs de clavier.

Récapitulatif — À retenir pour le handicap moteur

100% navigable au clavier Focus visible toujours Skip link en premier Cibles ≥ 44×44px Action au relâchement Délais ajustables Pas de piège clavier Alt aux gestes complexes

Sources vérifiées