Accessibilité web pour les personnes aveugles : Guide complet

En France, environ 1,7 million de personnes sont atteintes d'un trouble de la vision, dont 207 000 aveugles ou malvoyants profonds et plus de 930 000 malvoyants moyens (enquête Handicaps-Incapacités-Dépendance, DREES 2005, dernier décompte officiel de cette population). Ces utilisateurs naviguent sur le web différemment : ils ne voient pas les interfaces mais les écoutent via des technologies d'assistance appelées lecteurs d'écran. Comprendre leurs besoins est essentiel pour créer des sites web véritablement inclusifs.

Comment les personnes aveugles naviguent-elles sur le web ?

Les lecteurs d'écran

Un lecteur d'écran est un logiciel qui convertit le contenu de l'écran en synthèse vocale ou en braille. Les plus utilisés selon l'enquête WebAIM 2024 sont :

• JAWS (Job Access With Speech) : 40,5% - logiciel payant, référence professionnelle
• NVDA (NonVisual Desktop Access) : 37,7% - gratuit et open source
• VoiceOver : 12,9% - intégré à macOS et iOS
• TalkBack : utilisé sur Android

Ces outils lisent le contenu dans l'ordre du code source, pas dans l'ordre visuel. Ils annoncent également le type de chaque élément (titre, lien, bouton, image...).

Modes de navigation

Les utilisateurs de lecteurs d'écran ne lisent pas les pages lineairement. Ils utilisent des raccourcis clavier pour naviguer efficacement :

Cette navigation par éléments est fondamentale : si votre page n'a pas de structure claire, l'utilisateur doit tout écouter linéairement, ce qui est extrêmement fastidieux.

Les piliers de l'accessibilité pour les aveugles

1. Structure sémantique des titres

Les titres (<h1> à <h6>) sont le principal moyen de navigation pour les utilisateurs de lecteurs d'écran. 67,7% d'entre eux naviguent en priorité par titres.

Bonnes pratiques :

• Un seul <h1> par page, décrivant le sujet principal
• Hiérarchie logique sans saut de niveau (pas de <h1> suivi de <h3>)
• Chaque section importante a son titre
• Les titres doivent être descriptifs, pas génériques

<h1>guide de l'accessibilité web</h1>
  <h2>Pourquoi l'accessibilité est importante</h2>
  <h2>Les bonnes pratiques</h2>
    <h3>Structure des titres</h3>
    <h3>Alternatives textuelles</h3>

2. Landmarks et régions

Les landmarks ARIA définissent les grandes zones de la page. Les lecteurs d'écran permettent de naviguer directement entre elles.

<header role="banner">En-tête du site</header>
<nav role="navigation">Menu principal</nav>
<main role="main">Contenu principal</main>
<aside role="complementary">Barre latérale</aside>
<footer role="contentinfo">Pied de page</footer>

Les éléments HTML5 sémantiques (<header>, <nav>, <main>, etc.) portent ces rôles implicitement, mais les attributs role renforcent la compatibilité avec les anciens lecteurs d'écran.

3. Textes alternatifs pour les images

Sans alternative textuelle, une image n'existe tout simplement pas pour un utilisateur aveugle. Pourtant, 56% des images sur le web en sont dépourvues.

Règles fondamentales :

• Images informatives : décrivez le contenu et le contexte, pas l'apparence
• Images fonctionnelles (boutons, liens) : décrivez l'action
• Images décoratives : utilisez alt=""
• Images complexes (graphiques) : fournissez une description longue

Utilisez notre générateur de texte alternatif pour créer des descriptions pertinentes.

4. Liens et boutons explicites

Les utilisateurs de lecteurs d'écran peuvent lister tous les liens d'une page. Des libellés vagues comme "cliquez ici" ou "en savoir plus" deviennent incompréhensibles hors contexte.

À éviter :

<a href="/offre">Cliquez ici</a>
Pour en savoir plus sur notre offre, <a href="/offre">cliquez ici</a>.

Préférable :

<a href="/offre">Découvrir notre offre d'audit RGAA</a>

Si vous ne pouvez pas modifier le texte visible, utilisez aria-label :

<a href="/offre" aria-label="Découvrir notre offre d'audit RGAA">En savoir plus</a>

5. Formulaires accessibles

Les formulaires sont des points de friction critiques. Chaque champ doit être correctement associé à son label.

<label for="email">Adresse email (obligatoire)</label>
<input type="email" id="email" name="email" required aria-describedby="email-aide">
<span id="email-aide">Format : exemple@domaine.fr</span>

Points clés :

• Association label/input via for et id
• Messages d'aide via aria-describedby
• Annonce des erreurs via aria-live ou focus automatique
• Indication des champs obligatoires dans le label, pas seulement par la couleur

6. Tableaux de données

Les tableaux doivent être correctement structurés pour que les lecteurs d'écran puissent annoncer les en-têtes correspondant à chaque cellule.

<table>
  <caption>Tarifs des offres RGAA Checker</caption>
  <thead>
    <tr>
      <th scope="col">Offre</th>
      <th scope="col">Prix mensuel</th>
      <th scope="col">Audits inclus</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Starter</th>
      <td>29 EUR</td>
      <td>10 audits</td>
    </tr>
  </tbody>
</table>

L'attribut scope indique si l'en-tête s'applique à la colonne (col) ou à la ligne (row).

Erreurs courantes à éviter

Images de texte

N'utilisez jamais d'images pour afficher du texte (sauf logos). Le texte dans les images est illisible pour les lecteurs d'écran et ne peut pas être agrandi ou personnalisé.

Contenu accessible uniquement au survol

Les infobulles et menus qui apparaissent au survol de la souris sont souvent inaccessibles. Assurez-vous qu'ils sont aussi déclenchables au focus clavier et persistent assez longtemps pour être lus.

Changements de contexte non annoncés

Les contenus dynamiques (chargement AJAX, onglets, accordéons) doivent être annoncés aux lecteurs d'écran via aria-live ou en déplaçant le focus.

ARIA mal utilisé

Paradoxalement, les pages utilisant ARIA ont 41% d'erreurs en plus que celles sans ARIA (WebAIM 2025). La première règle d'ARIA : préférez le HTML natif. Un <button> est toujours préférable à <div role="button">.

Tester avec un lecteur d'écran

Installation rapide

NVDA (Windows, gratuit) :

1. Téléchargez depuis nvaccess.org
2. Lancez et appuyez sur Insert+Espace pour activer le mode navigation

VoiceOver (Mac, intégré) :

1. Activez avec Cmd+F5
2. Utilisez VO (Ctrl+Option) + flèches pour naviguer

Tests essentiels

1. Pouvez-vous identifier le sujet de la page (H1) ?
2. Pouvez-vous naviguer par titres vers chaque section ?
3. Les images sont-elles décrites de manière pertinente ?
4. Pouvez-vous compléter un formulaire sans souris ?
5. Les messages d'erreur sont-ils annoncés ?
6. Les liens sont-ils compréhensibles hors contexte ?

Conclusion

Rendre un site accessible aux personnes aveugles ne demande pas de compétences extraordinaires, mais une rigueur dans l'application des standards HTML et ARIA. La clé réside dans la structure sémantique : des titres hiérarchiques, des alternatives textuelles pertinentes, des formulaires correctement étiquetés et une navigation clavier complète.

Commencez par tester votre site avec un lecteur d'écran. Quelques minutes d'écoute vous en apprendront plus que des heures de lecture théorique. Et n'oubliez pas : ce qui est bon pour les utilisateurs aveugles est souvent bon pour tous les utilisateurs, y compris pour le référencement naturel.