Comprendre

Qu'est-ce que le TDAH ?

Le Trouble du Déficit de l'Attention avec ou sans Hyperactivité (TDAH) est un trouble neurodéveloppemental caractérisé par des difficultés de concentration, d'impulsivité et parfois d'hyperactivité. Sur le web, cela se traduit par une difficulté à maintenir l'attention sur un parcours complexe, une sensibilité extrême aux distracteurs visuels, et une frustration rapide face aux interfaces non intuitives.

Le cerveau TDAH fonctionne différemment : il a besoin de stimulation et de clarté simultanément. Une interface surchargée est épuisante, mais une interface trop vide peut aussi nuire à l'engagement. L'enjeu est la juste densité d'information avec des repères visuels forts.

⚡ Difficultés d'attention

  • Perd le fil dans les longs formulaires
  • Oublie où il en est dans un processus multi-étapes
  • Abandonne une tâche si elle prend trop de temps
  • Distrait par les animations et publicités

🎯 Impulsivité et mémoire

  • Clique sans lire les confirmations
  • Soumet des formulaires incomplets
  • Difficultés à mémoriser les étapes précédentes
  • Besoin de toujours voir où il en est (progression)
Code

Bonnes pratiques pour le TDAH

✓ Ce qui aide concrètement

  • Diviser les longs formulaires en étapes courtes avec une barre de progression visible
  • Sauvegarder automatiquement la progression (localStorage ou serveur)
  • Afficher clairement où l'utilisateur en est (étape 2/4)
  • Bouton "Continuer plus tard" pour les tâches longues
  • Espaces blancs généreux entre les sections
  • Titres et intertitres réguliers pour permettre de "retrouver le fil"
  • Alertes d'inactivité avec prolongation facile (WCAG 2.2.1)
  • Résumé visible des actions effectuées avant confirmation

Formulaire multi-étapes avec progression :

<!-- ✓ Indicateur de progression accessible --> <nav aria-label="Progression du formulaire"> <ol role="list"> <li aria-current="step">Étape 1 : Informations</li> <li>Étape 2 : Choix</li> <li aria-disabled="true">Étape 3 : Paiement</li> </ol> </nav> <!-- Barre visuelle --> <div role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Étape 1 sur 3" style="width:33%"> </div> <!-- Sauvegarde automatique --> <div role="status" aria-live="polite" aria-atomic="true"> <!-- Injecté par JS quand la sauvegarde est effectuée --> Brouillon sauvegardé à 14:32 </div>

Réduire les distracteurs — Supprimer ou mettre en pause tout ce qui bouge pendant une tâche critique :

/* ✓ Désactiver les animations si prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .banniere-pub, .carousel-auto, .notification-popup { animation: none; transition: none; } } /* ✓ Mettre en avant le contenu actif, atténuer le reste */ .formulaire-actif ~ .sidebar { opacity: 0.4; pointer-events: none; }
WCAG 2.2 & RGAA 4.1

Critères clés pour le TDAH

WCAG 2.2.1 — A Durée suffisante : tout délai peut être désactivé, ajusté (×10) ou prolongé (×20). Un formulaire qui expire en 15 minutes sans avertissement est une barrière majeure pour le TDAH.
WCAG 2.2.2 — A Pause / Stop / Masquer : tout contenu qui bouge, clignote ou défile doit pouvoir être mis en pause. Les animations auto-jouées sont particulièrement problématiques.
WCAG 3.2.3 — AA Navigation cohérente : la navigation et les composants répétés doivent apparaître dans le même ordre relatif sur toutes les pages. Réduit la charge cognitive de réorientation.
WCAG 3.3.4 — AA Prévention des erreurs : pour les soumissions importantes, permettre de vérifier, corriger, et confirmer avant envoi définitif. Compense l'impulsivité.

Récapitulatif — À retenir pour le TDAH

Étapes courtes et numérotées Barre de progression Sauvegarde automatique Pas d'animations auto Alertes de délai Résumé avant confirmation Espaces blancs généreux

Sources vérifiées