Les aides techniques : comment les personnes handicapées naviguent sur le web

Handicap & humain

Pourquoi les aides techniques ?

Une aide technique est un outil, un appareil ou un logiciel qui permet à une personne en situation de handicap de :

  • Percevoir le contenu (mal-voyance, cécité)
  • Naviguer sans souris (motricité fine réduite)
  • Comprendre le contenu (dyslexie, TDAH)
  • Interagir avec l’interface (polyhandicap, SLA)

En tant que web designer, vous n’avez pas besoin de créer ces outils. Vous devez concevoir le site de façon à ce qu’ils fonctionnent.

Catégories d’aides techniques

1. Lecteurs d’écran (déficience visuelle)

Qu’est-ce que c’est : logiciel qui lit le contenu à haute voix et propose une navigation structurée.

Exemples : NVDA (Windows, gratuit), JAWS (Windows, payant), VoiceOver (Mac/iOS, gratuit), TalkBack (Android, gratuit)

Implications web :

  • HTML sémantique (landmarks, headings, labels)
  • alt sur les images
  • ARIA si nécessaire
  • Navigation au clavier complète

2. Plages braille (déficience visuelle + cécité)

Qu’est-ce que c’est : appareil qui affiche le contenu en braille tactile, connecté à l’ordinateur.

Prix : 1 000 € à 15 000 € (appareil coûteux)

Implications web :

  • Mêmes que le lecteur d’écran
  • Support des abrégés braille (si votre SR le demande)

3. Loupe d’écran (basse vision)

Qu’est-ce que c’est : agrandissement du contenu (200%, 400%), avec suivi du curseur.

Implications web :

  • Zoom 200% et 400% sans débordement horizontal
  • Reflow à 320px CSS
  • Texte adaptatif (pas de viewport user-scalable=no)

4. Claviers & contrôleurs adaptés (motricité fine réduite)

Exemples :

  • Clavier adapté : touches plus grandes, programmables
  • Contacteur (switch) : bouton unique, accès par scanning (la personne appuie répétitif ; l’appareil scanne les options et l’utilisateur appuie quand celle qu’il veut est surlignée)
  • Trackball : boule remplaçant la souris
  • Joystick : pour les mouvements limités

Implications web :

  • Navigation 100% clavier (Tab, Entrée, Échap)
  • Focus visible et logique
  • Pas de temps limité (pas de timeout)
  • Cibles tactiles ≥ 44×44 px (WCAG 2.2)

5. Eye-tracking (paralysie, SLA, polyhandicap)

Qu’est-ce que c’est : caméra qui suit le regard et traduit le mouvement des yeux en contrôle de souris.

Implications web :

  • Mêmes que clavier adapté (les eye-trackers envoient des clics)
  • Focus visible important (la personne doit voir où elle “regarde”)

6. Logiciels de dictée (dyspraxie, dyslexie, TDAH)

Exemples : Dragon NaturallySpeaking, Copilot (Windows)

Qu’est-ce que c’est : convertit la parole en texte (ou en contrôle de l’interface).

Implications web :

  • Labels explicites (pour que la dictée trouve les bonnes cibles)
  • Pas de commandes vocales cachées
  • Formulaires avec <label> liés

7. Filtres & modes (daltonisme, photosensibilité)

Exemples :

  • Mode sombre (réduction du contraste, moins fatigant)
  • Mode haut contraste (dyslexie, basse vision)
  • Filtre rouge/vert (daltonisme)

Implications web :

  • Respect de prefers-color-scheme
  • Respect de prefers-contrast
  • Pas d’animation clignotante > 3/sec (seizure risk)

Ce que le web designer doit faire

Pour supporter tous ces outils :

  1. HTML sémantique (landmarks, headings, labels)
  2. Images : alt descriptif
  3. Navigation clavier : 100% accessible, focus visible
  4. Zoom : 200% + 400% sans débordement
  5. Contrastes : WCAG AA minimum
  6. Pas d’automatisation : pas de vidéo auto-play, pas de timeouts
  7. Préférences utilisateur : prefers-* media queries

Ressources

Le message clé : les aides techniques existent. Votre travail n’est pas de les créer, mais de concevoir un web qui les laisse fonctionner.