L'accessibilité numérique est en train de devenir un enjeu majeur pour toutes les entreprises ayant un site Internet. En France, le Référentiel Général d'Amélioration de l'Accessibilité (RGAA) fournit un cadre pour rendre les contenus web accessibles à tous, y compris aux personnes en situation de handicap.
Aujourd’hui, on souhaitait aborder avec vous le sujet des images et comment faire pour qu’elles soient conformes à ces normes d’accessibilité. En effet, pour tous les sites que nous développons, et c’est sans doute le cas du vôtre, nous utilisons beaucoup d’images qui permettent de les rendre plus attractifs visuellement et de refléter les identités de marque.
Si ces images sont présentes sur tous les sites internet, elles peuvent malheureusement constituer un obstacle à l'accessibilité lorsqu’elles ne sont pas correctement intégrées.
Nous vous donnons donc ici des pistes pour optimiser vos images selon le RGAA et garantir ainsi une expérience utilisateur inclusive.
1. L'importance de l'attribut "alt"
- L'attribut "alt" est un élément essentiel pour l'accessibilité des images. Il permet de fournir une alternative textuelle à l'image, qui sera lue par les technologies d'assistance telles que les lecteurs d'écran pour les personnes malvoyantes ou aveugles.
-
Images porteuses d'information : pour les images qui transmettent une information importante, l'attribut "alt" doit décrire brièvement et précisément le contenu de l'image. Par exemple, si une image montre un graphique des ventes, l'attribut "alt" pourrait être : "Graphique des ventes trimestrielles : augmentation de 15% au deuxième trimestre".
-
Images de décoration : les images purement décoratives n'apportent pas d'information essentielle au contenu. On parle ici des pictogrammes de réassurance par exemple ou des formes décoratives par exemple. Dans ce cas, l'attribut
altdoit être vide (alt="") pour indiquer aux technologies d'assistance qu'elles peuvent ignorer l'image. -
Images dans les composants d'interface : si une image est utilisée dans un composant d'interface (par exemple, un bouton), l'alternative textuelle doit indiquer la fonction du composant.
-
Images de test ou de captcha : les images utilisées dans les tests ou les captchas doivent avoir une alternative textuelle qui identifie la fonction du test ou du captcha. Dans certains cas, il peut être nécessaire de fournir une alternative accessible au test ou au captcha lui-même.
2. Descriptions longues pour les images complexes
Certaines images, comme les infographies, les schémas ou les graphiques détaillés, peuvent nécessiter une description plus longue que ce que permet l'attribut alt. Le RGAA recommande plusieurs solutions pour fournir ces descriptions longues :
-
Liens vers des pages ou des documents de description : un lien peut être placé à proximité de l'image pour diriger les utilisateurs vers une page ou un document contenant une description détaillée.
-
Utilisation de l'attribut "longdesc" : bien que moins couramment utilisé, l'attribut "longdesc" permet de spécifier l'URL d'une page contenant la description longue.
-
Balises <figure> et <figcaption>: ces balises HTML5 peuvent être utilisées pour structurer l'image et sa légende, et la légende peut servir de description longue.
3. Images texte et texte stylé
-
Remplacement des images texte : le RGAA recommande, dans la mesure du possible, de remplacer les images contenant du texte par du texte stylé en CSS. Cela présente plusieurs avantages en termes d'accessibilité :
- Le texte stylé est redimensionnable à volonté par l'utilisateur.
- Il est compatible avec les technologies d'assistance, comme les lecteurs d'écran.
- Il facilite la traduction et la maintenance du contenu.
-
Exceptions : Dans certains cas particuliers, il peut être impossible de remplacer une image texte par du texte stylé (par exemple, pour des logos ou des images contenant des effets typographiques complexes). Dans ces cas, il est recommandé de fournir une alternative textuelle pertinente via l'attribut "alt".
4. Cas particuliers et bonnes pratiques
-
Images cliquables : si une image est utilisée comme lien, l'attribut "alt" doit décrire la destination du lien, et non l'image elle-même.
-
Groupes d'images : si plusieurs images forment un ensemble cohérent, il peut être nécessaire de fournir une description globale pour l'ensemble du groupe, en plus des descriptions individuelles.
-
Images animées et vidéos : les images animées (GIFs) et les vidéos sont soumises à des exigences d'accessibilité spécifiques, notamment en matière de transcription et de sous-titrage.
-
Images vectorielles : les images vectorielles (SVG) sont souvent plus accessibles que les images matricielles (JPEG, PNG) car elles peuvent être mises à l'échelle sans perte de qualité et leur contenu textuel est accessible. Ce format est donc à privilégier.
-
Tests et validation : nous vous conseillons de tester l'accessibilité des images à l'aide d'outils d’évaluation et de lecteurs d'écran pour s'assurer qu'elles sont correctement interprétées par les technologies d'assistance.
En résumé
L'optimisation des images pour l'accessibilité est une étape incontournable au moment de créer un site Internet que vous souhaitez inclusif.
En utilisant correctement l'attribut "alt", en fournissant des descriptions longues pour les images complexes et en suivant d’autres bonnes pratiques données par le RGAA, vous pouvez garantir que vos contenus visuels sont accessibles à tous les utilisateurs, quel que soit leur handicap.
N.B : une veille permanente sur ces sujets est nécessaire tant les règles évoluent.
Pour aller plus loin :
Chez NetCURD, nous pouvons vous aiguiller à ce propos et mettre votre site Internet en conformité si ce n’est pas déjà le cas.