Troubles DYS — Accessibilité numérique

Comprendre

Qu'est-ce que les troubles DYS ?

Les troubles DYS sont des troubles neurodéveloppementaux spécifiques des apprentissages. Ils touchent entre 6 et 10 % de la population française selon le Gouvernement et n'ont aucun lien avec le niveau d'intelligence. Ce sont des handicaps invisibles — un utilisateur DYS peut paraître parfaitement à l'aise alors qu'il fournit un effort cognitif considérable pour lire votre page.

📖 Dyslexie

Trouble de la lecture et du déchiffrage
Les lettres semblent se déplacer, se retourner, se confondre (b/d, p/q)
Lecture lente et fatigante
Impact sur la navigation web et les formulaires

✏️ Dysorthographie

Trouble de l'écriture orthographique
Erreurs fréquentes dans les champs texte
Sensibilité aux corrections automatiques agressives
Stress face aux formulaires complexes

🔢 Dyscalculie

Trouble du calcul et du raisonnement logico-mathématique
Difficulté à saisir des numéros (carte, téléphone, date)
Besoin de formats clairement indiqués
Messages d'erreur avec exemples concrets indispensables

🧩 Dyspraxie / Dysphasie

Dyspraxie : trouble de la coordination motrice et visuo-spatiale
Difficulté à cliquer sur des éléments petits ou proches
Dysphasie : trouble du langage oral et de sa compréhension
Vocabulaire complexe = barrière supplémentaire

"À 18h, après avoir lu des documents numériques toute la journée, j'ai l'impression que les lettres dansent devant mes yeux. Polices trop fines ou trop serrées, formulaires illisibles, menus confus… chaque clic devient un exercice de concentration épuisant." — Marion Ranvier, directrice de la Contentsquare Foundation, dyslexique

Impacts concrets

Qu'est-ce qui bloque un utilisateur DYS sur votre site ?

✗ Ce qui pose problème

Texte justifié — crée des "rivières blanches" visuelles qui perturbent la lecture
Police avec empattements (serif) — les lettres se confondent plus facilement
Lignes de plus de 80 caractères — fatigue oculaire et perte du fil
Fonds blancs pure (#fff) éblouissants — augmentent le flou visuel
Blocs de texte denses sans espacement ni hiérarchie
Texte en majuscules, en italique ou souligné en dehors des liens
Animations, textes défilants ou éléments mobiles — distracteurs
Placeholder comme seul label de champ — disparaît à la saisie
Messages d'erreur sans exemple de correction
Contenu uniquement en image (le texte ne peut pas être relu par un outil de lecture)

Code

Bonnes pratiques HTML, CSS et JS

Typographie et espacement — Le WCAG 1.4.12 exige que le contenu reste lisible si l'utilisateur modifie l'espacement du texte. En pratique, utiliser des unités relatives et ne jamais bloquer ces propriétés CSS :

/* ✓ Espacement WCAG 1.4.12 — ne jamais bloquer */
body {
  font-family: 'Segoe UI', system-ui, sans-serif; /* Sans empattement */
  font-size: 1rem; /* Base relative, respecte le zoom navigateur */
  line-height: 1.6;  /* Min 1.5 recommandé (WCAG 1.4.12) */
  letter-spacing: 0.05em; /* Min 0.12em WCAG, adaptation douce ici */
  word-spacing: 0.1em;
  color: #1a1a2e; /* Pas de noir pur — légèrement adouci */
  background: #fafaf8; /* Fond ivoire — moins éblouissant que #fff */
}

p {
  max-width: 70ch; /* 65-80 caractères max par ligne */
  text-align: left;  /* Jamais justify — crée des rivières */
  margin-bottom: 1.2em;
}

/* Respecter prefers-reduced-motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

Formulaires clairs — Un champ mal étiqueté est l'un des obstacles les plus fréquents pour les personnes dyslexiques et dyscalculiques :

<!-- ✓ Label lié + format explicite + exemple d'erreur -->
<div class="form-field">
  <label for="date-naissance">
    Date de naissance <span class="format-hint">(JJ/MM/AAAA)</span>
  </label>
  <input
    type="text"
    id="date-naissance"
    inputmode="numeric"
    autocomplete="bday"
    aria-describedby="date-aide date-erreur"
    placeholder="01/06/1990">
  <span id="date-aide" class="hint">Format : jour/mois/année</span>
  <span id="date-erreur" role="alert" hidden>
    Format incorrect. Exemple valide : 01/06/1990
  </span>
</div>

Option de lecture adaptée — Permettre à l'utilisateur de basculer vers une police DYS-friendly. Les polices comme Luciole ou OpenDyslexic n'aident qu'une partie des personnes dyslexiques, mais le choix est essentiel :

/* CSS : variable de police commutable via JS */
:root { --police-lecture: 'Segoe UI', system-ui, sans-serif; }
[data-font="dys"] { --police-lecture: 'Luciole', 'OpenDyslexic', sans-serif; }
body { font-family: var(--police-lecture); }

// JS : basculer la police
document.getElementById('btn-police-dys').addEventListener('click', function() {
  var actif = document.documentElement.getAttribute('data-font') === 'dys';
  document.documentElement.setAttribute('data-font', actif ? '' : 'dys');
  localStorage.setItem('police-dys', actif ? 'non' : 'oui');
});

WCAG 2.2 & RGAA 4.1

Critères clés applicables aux troubles DYS

WCAG 1.4.3 — AA Contraste du texte : ratio minimum 4,5:1 pour le texte normal, 3:1 pour le grand texte (>18pt). Un fond ivoire (#fafaf8) avec texte foncé (#1a1a2e) offre un contraste de 16:1.

WCAG 1.4.12 — AA Espacement du texte : le contenu reste lisible si l'utilisateur applique line-height ≥ 1,5, letter-spacing ≥ 0,12em, word-spacing ≥ 0,16em. Ne jamais fixer ces valeurs en px absolus.

WCAG 1.4.10 — AA Reflow : à 400% de zoom (320px effectifs), le contenu reste lisible sans scroll horizontal. Indispensable pour les utilisateurs qui agrandissent pour mieux distinguer les lettres.

WCAG 3.3.2 — A Labels et instructions : chaque champ de formulaire doit avoir un label visible ET son format doit être précisé (ex : date JJ/MM/AAAA). Le placeholder seul ne compte pas.

WCAG 3.3.3 — AA Suggestion après erreur : en cas de saisie incorrecte, suggérer la correction avec un exemple concret. Critique pour la dyscalculie et la dysorthographie.

RGAA 10.8 Contenu caché accessible : les contenus masqués doivent être ignorés des technologies d'assistance. Pertinent pour les outils de lecture qui suivent l'ordre du DOM.