Troubles visuels — Accessibilité numérique

Comprendre

Les différents troubles visuels

🔲 Cécité totale

Utilise un lecteur d'écran (NVDA, JAWS, VoiceOver)
Navigation au clavier uniquement
Écoute le contenu linéairement ou saute de titre en titre
Les images sans alt text sont ignorées ou annoncées "image"

👁️ Malvoyance / basse vision

Zoom navigateur à 200%, 400% ou plus
Personnalisation des couleurs et polices
Lecteur d'écran parfois utilisé en complément
Loupe d'écran système (ZoomText, loupe Windows)

🎨 Daltonisme

8% des hommes, 0,5% des femmes
Types : deutéranopie (vert), protanopie (rouge), tritanopie (bleu)
Rouge/vert indistinguables pour la majorité
Toute information uniquement par la couleur est inaccessible

☀️ Photophobie / sensibilité à la lumière

Fonds très blancs douloureux
Mode sombre indispensable
prefers-color-scheme CSS à respecter
Contrastes trop élevés aussi problématiques

Code — Lecteurs d'écran

Rendre votre site compatible avec les lecteurs d'écran

Textes alternatifs des images — WCAG 1.1.1 (A), le critère le plus fondamental :

<!-- ✓ Image informative : décrire l'information portée par l'image -->
<img src="graphique-ventes.png"
     alt="Graphique : les ventes ont augmenté de 40% en 2024 vs 2023"
     width="600" height="300">

<!-- ✓ Image décorative : alt vide pour être ignorée -->
<img src="separateur.svg"
     alt=""
     aria-hidden="true">

<!-- ✓ Icône SVG fonctionnelle -->
<button type="button">
  <svg aria-hidden="true" focusable="false">...icône...</svg>
  <span>Télécharger le PDF</span>
</button>

Structure sémantique — Les lecteurs d'écran naviguent par landmarks et titres :

<!-- ✓ Structure de page complète avec landmarks -->
<header><!-- role="banner" implicite -->
  <nav aria-label="Navigation principale">...</nav>
</header>
<main id="contenu-principal"><!-- role="main" implicite -->
  <h1>Titre principal (un seul par page)</h1>
  <section aria-labelledby="titre-section">
    <h2 id="titre-section">Titre de section</h2>
  </section>
</main>
<aside aria-label="Informations complémentaires">...</aside>
<footer>...</footer>

Mode sombre et prefers-color-scheme :

/* ✓ Mode sombre automatique selon le système (WCAG 1.3.4) */
:root { --fond: #ffffff; --txt: #1a1a2e; --bord: #e2e8f0; }
@media (prefers-color-scheme: dark) {
  :root { --fond: #0f0f1a; --txt: #e8e8f0; --bord: #2d2d4e; }
}
/* ✓ Aussi : mode sombre manuel via data-theme */
[data-theme="dark"] { --fond: #0f0f1a; --txt: #e8e8f0; }

Daltonisme — Ne jamais transmettre une information uniquement par la couleur (WCAG 1.4.1) :

<!-- ✗ Mauvais : erreur signalée uniquement par couleur rouge -->
<input type="email" style="border-color:red">

<!-- ✓ Correct : couleur + icône + texte -->
<input type="email"
       aria-invalid="true"
       aria-describedby="email-err">
<span id="email-err" role="alert">
  ⚠ Format invalide — Ex : contact@intally-solutions.fr
</span>

/* Indicateur visuel multi-canal */
[aria-invalid="true"] {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(185,28,28,.2);
}

WCAG 2.2 & RGAA 4.1

Critères clés pour les troubles visuels

WCAG 1.1.1 — A Contenu non textuel : toute image, icône, graphique ou CAPTCHA a une alternative textuelle. Images décoratives : alt="" obligatoire.

WCAG 1.4.1 — A Utilisation de la couleur : la couleur n'est pas le seul moyen de transmettre une information. Toujours doubler d'un texte, d'une icône ou d'un motif.

WCAG 1.4.3 — AA Contraste du texte : 4,5:1 minimum pour le texte normal, 3:1 pour le grand texte. Vérifier avec WebAIM Contrast Checker ou l'extension axe.

WCAG 1.4.4 — AA Redimensionnement du texte : le texte reste lisible jusqu'à 200% de zoom sans perte de contenu ni de fonctionnalité. Utiliser rem/em, jamais px pour les tailles de police.

WCAG 1.4.10 — AA Reflow : à 400% de zoom (320px CSS effectifs), le contenu ne nécessite pas de scroll dans les deux directions. Le responsive design résout généralement ce critère.

RGAA 1.1 à 1.9 Images (thématique RGAA) : 9 critères couvrant les alternatives textuelles des images informatives, décoratives, captchas, images texte, et images légendées.

🛠️ Outils de test recommandés

NVDA + Chrome (Windows) VoiceOver + Safari (macOS/iOS) TalkBack (Android) WebAIM Contrast Checker Colour Contrast Analyser Sim Daltonism (simulateur) axe DevTools Accessibility Insights

Récapitulatif — À retenir pour les troubles visuels

Alt text sur toutes les images Contraste ≥ 4,5:1 Pas d'info par couleur seule Structure sémantique H1>H2>H3 rem/em pour les polices Mode sombre (prefers-color-scheme) Landmarks ARIA Reflow 400% de zoom

Sources vérifiées