Créer des infographies accessibles : Guide WCAG et RGAA complet

Les infographies combinent données, texte et éléments visuels pour communiquer des informations complexes de manière attrayante. Cependant, sans adaptations spécifiques, elles restent inaccessibles aux personnes utilisant des technologies d'assistance. Voici comment créer des infographies conformes aux normes d'accessibilité.

Pourquoi l'accessibilité des infographies compte

Les infographies posent des défis uniques en matière d'accessibilité. Elles contiennent souvent des informations cruciales présentées uniquement sous forme visuelle. Un lecteur d'écran ne peut pas interpréter spontanément un graphique en camembert ou une chronologie illustrée.

Selon le RGAA 4.1 et les WCAG 2.2, toute information visuelle doit avoir un équivalent accessible. Pour les infographies, cela implique de repenser la manière dont nous concevons et intégrons ces contenus.

Les exigences réglementaires

Critère WCAG 1.1.1 : Contenu non textuel

Tout contenu non textuel doit avoir une alternative textuelle qui remplit une fonction équivalente. Pour une infographie, un simple attribut alt ne suffit généralement pas.

Critère WCAG 1.4.11 : Contraste des éléments non textuels

Les éléments graphiques significatifs doivent présenter un contraste d'au moins 3:1 avec les couleurs adjacentes. Cela inclut les barres de graphiques, les lignes de courbes et les icônes porteuses de sens.

Critère RGAA 1.6 et 1.7 : Description détaillée

Lorsqu'une alternative textuelle courte ne suffit pas à transmettre toute l'information, une description détaillée doit être fournie.

Conception accessible des infographies

Structure et hiérarchie

Organisez votre infographie avec une structure logique. Utilisez des titres clairs pour chaque section. Établissez un ordre de lecture naturel, généralement de haut en bas et de gauche à droite pour les publics francophones.

Chaque élément visuel doit avoir une raison d'être. Évitez les décorations purement esthétiques qui n'apportent aucune information, ou marquez-les clairement comme décoratives.

Choix des couleurs

Ne transmettez jamais une information par la couleur seule. Si vous utilisez le rouge pour les valeurs négatives et le vert pour les positives, ajoutez des signes + et - ou des icônes distinctives.

Vérifiez les contrastes entre tous les éléments. Le texte sur fond coloré doit respecter un ratio de 4.5:1 minimum. Les bordures et séparateurs significatifs nécessitent un ratio de 3:1.

[!TIP] Testez votre infographie avec un simulateur de daltonisme avant publication. Consultez notre guide sur le daltonisme pour approfondir ce sujet.

Typographie lisible

Utilisez des polices sans empattement pour une meilleure lisibilité sur écran. Évitez les tailles inférieures à 12 pixels. Assurez un interlignage suffisant (au moins 1.5 fois la taille de police).

Alternatives textuelles pour infographies

Le texte alternatif court

L'attribut alt doit fournir une description concise identifiant le type et le sujet de l'infographie. Par exemple : "Infographie présentant les 5 étapes du processus de recyclage en France."

La description longue

Pour les infographies complexes, une description longue est indispensable. Plusieurs techniques existent.

Option 1 : Texte visible après l'infographie

Incluez une transcription complète directement dans la page, visible par tous. Cette approche bénéficie également aux utilisateurs sur mobile ou avec une connexion lente.

Option 2 : Lien vers une page de description

Fournissez un lien clairement identifié vers une page contenant la description complète.

<figure>
  <img src="infographie-recyclage.png"
       alt="Infographie sur le processus de recyclage en France">
  <figcaption>
    Le processus de recyclage en 5 étapes.
    <a href="/descriptions/recyclage-infographie.html">
      Description textuelle complète
    </a>
  </figcaption>
</figure>

Option 3 : Zone masquée accessible

Utilisez une zone visuellement masquée mais accessible aux technologies d'assistance.

<div class="sr-only" id="desc-infographie">
  <!-- Description complète ici -->
</div>
<img src="infographie.png"
     alt="Infographie sur le recyclage"
     aria-describedby="desc-infographie">

Structurer une description efficace

Commencer par le contexte

Décrivez d'abord le type de représentation (graphique en barres, chronologie, carte conceptuelle) et son objectif global.

Détailler les données essentielles

Présentez les informations clés dans un ordre logique. Pour un graphique en barres comparant les ventes trimestrielles, mentionnez chaque valeur et les tendances observables.

Conclure par les insights

Terminez par les conclusions ou enseignements que l'infographie met en évidence. C'est souvent l'information la plus importante pour l'utilisateur.

[!NOTE] Une bonne description ne doit pas simplement décrire ce qu'on voit, mais transmettre ce qu'on apprend de l'infographie.

Infographies interactives

Les infographies web modernes incluent souvent des éléments interactifs. Ces éléments nécessitent des considérations supplémentaires.

Navigation au clavier

Tous les éléments interactifs doivent être accessibles au clavier. L'ordre de tabulation doit suivre une logique cohérente. Les états de focus doivent être visibles.

Informations au survol

Les tooltips et informations apparaissant au survol doivent également être accessibles via le clavier et les lecteurs d'écran. Utilisez les attributs ARIA appropriés.

<button aria-describedby="tooltip-1"
        aria-expanded="false">
  Trimestre 1
</button>
<div id="tooltip-1" role="tooltip">
  Ventes : 1.2 millions d'euros (+15% vs N-1)
</div>

Animations et mouvements

Respectez les préférences utilisateur concernant les animations. Vérifiez que prefers-reduced-motion est pris en compte. Évitez les animations clignotantes ou flashantes.

Formats et technologies recommandés

SVG accessible

Le format SVG permet d'intégrer des textes accessibles directement dans le graphique via les éléments <title> et <desc>.

<svg role="img" aria-labelledby="titre-graph desc-graph">
  <title id="titre-graph">Évolution des ventes 2025</title>
  <desc id="desc-graph">
    Graphique montrant une croissance de 25%
    des ventes entre janvier et juin 2025.
  </desc>
  <!-- éléments graphiques -->
</svg>

Tableaux de données complémentaires

Pour les graphiques basés sur des données, fournir un tableau accessible en complément permet aux utilisateurs de lecteurs d'écran d'accéder aux valeurs exactes.

Vérification et tests

Avant publication, vérifiez votre infographie avec plusieurs outils. Utilisez notre outil d'audit RGAA pour une vérification automatisée. Testez manuellement avec un lecteur d'écran comme NVDA ou VoiceOver. Validez les contrastes avec un analyseur de couleurs.

Impliquez si possible des utilisateurs de technologies d'assistance dans vos tests pour obtenir des retours authentiques.

Conclusion

Créer des infographies accessibles demande une réflexion en amont sur la structure et les alternatives textuelles. Cette démarche bénéficie à tous les utilisateurs, améliore le référencement naturel et garantit la conformité au RGAA. En intégrant ces pratiques dans votre workflow de création, vous produirez des contenus visuels véritablement inclusifs.