WordPress et accessibilité : comment rendre les images accessibles ?

Précision : les indications données dans ces articles sont basées sur l’éditeur classique et l’éditeur Gutenberg de la version 6.1.1 de WordPress.De plus, nous parlons ici plus précisément du CMS WordPress, mais toutes les recommandations présentes dans cette série d’articles sont des principes d’accessibilité que l’on doit respecter, que l’on utilise un CMS, ou pas.

Quels problèmes les images posent-elles pour l’accessibilité ?

Que ce soit des photos, infographies ou encore pictogrammes, les images sont omniprésentes sur Internet. Or, elles peuvent poser de nombreux problèmes pour plusieurs types de handicaps, notamment :

• les personnes aveugles : elles ne peuvent pas voir les images ;
• les personnes déficientes visuelles : elles peuvent rencontrer de grosses difficultés à lire le contenu écrit sur une image, par exemple car la police est difficile à lire, la taille des caractères souvent trop petite et/ou le contraste insuffisant ;
• les personnes DYS ^[1] et ayant des handicaps cognitifs : elles ne peuvent pas personnaliser l’affichage du texte sur une image, par exemple en augmentant la taille du texte ou son interlignage.

Pour toutes ces raisons, les images nécessitent une attention particulière.

Ainsi, pour les traiter de manière accessible, plusieurs cas de figure sont à prendre en compte :

1. masquer les images de décoration ;
2. fournir une alternative aux images porteuses d’information ;
3. proposer une description détaillée aux images complexes ;
4. lier les images à leur légende.

Comment déterminer si une image est décorative ou porteuse d’information ?

En fonction de son contexte d’utilisation, une image peut être décorative ou porteuse d’information ^[2].

Une image est décorative lorsqu’elle n’apporte pas d’information supplémentaire par rapport au texte qu’elle illustre.

À contrario, une image est dite porteuse d’information lorsqu’elle véhicule une information qui n’est pas présente dans le texte. On devra donc fournir une alternative sous la forme d’un texte alternatif pertinent.

Dans le premier cas, l’image est porteuse d’information, car l’information donnée dans l’image « Diplôme national de licence contrôlé par l’État » est seulement visible dans l’image, pas dans le texte adjacent. Il faudra donc renseigner son alternative : alt="Diplôme national de licence contrôlé par l’État".

Dans le second cas, l’information donnée dans l’image « Diplôme national de licence contrôlé par l’État » est aussi répétée dans le texte. L’image reste donc une image de décoration : c’est pourquoi son alternative ne doit pas être renseignée.

Masquer les images de décoration aux technologies d’assistance

Commençons par les images de décoration. Celles-ci doivent être ignorées par les technologies d’assistance, et notamment les lecteurs d’écran. L’objectif est de ne pas créer de bruit inutile pour les personnes aveugles lorsqu’elles naviguent.

Comment faire ? C’est tout simple ! Assurez-vous que le champ « Texte alternatif » soit bien vide lorsque vous insérez une image décorative dans un article ou une page WordPress.

Bonne pratique : ne pas renseigner le champ « Texte alternatif » par défaut lorsque vous ajoutez une image dans la médiathèque.

En effet, si une image est utilisée plusieurs fois, il se peut qu’elle soit décorative ou informative selon le contexte.

Note : si vous n’avez pas cette option ou s’il est obligatoire d’ajouter un texte dans votre éditeur, n’hésitez pas à faire remonter ce problème à l’équipe technique pour la rendre facultative.

Référence RGAA 4

• [Critère 1.2 A] Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?

Fournir une alternative pertinente aux images porteuses d’information

Si une image porteuse d’information n’est pas accompagnée d’une alternative, c’est une perte de contenu pour les utilisateurs et utilisatrices qui ne la voient pas ou qui la voient mal.

Dans ce cas de figure, il est indispensable d’ajouter un texte alternatif (aussi appelé texte de remplacement).

Ce texte alternatif doit être pertinent et reprendre l’information présente sur l’image.

Il faut bien saisir l’information visible sur l’image dans le champ en question.

Par exemple, nous avons une image qui contient le texte « Diplôme national de licence contrôlé par l’État ». Si on ajoute ce texte dans le champ « Texte alternatif » de WordPress, le lecteur d’écran va bien restituer « Diplôme national de licence contrôlé par l’État » :

Si l’image porteuse d’information est complexe, il est nécessaire de proposer une description détaillée et correctement structurée. Vous pouvez voir un exemple sur notre article « Lancement de la deuxième étude sur l’usage des lecteurs d’écran ».

Note : il n’est pas utile d’ajouter « image », « logo » ou « photo » dans l’alternative d’une image, car le lecteur d’écran restitue déjà la nature de l’élément qu’il est en train de lire. Dans le cas d’une image, il dira « graphique », comme nous avons pu le voir dans l’exemple précédent.

Références RGAA 4

• [Critère 1.1 A] Chaque image porteuse d’information a-t-elle une alternative textuelle ?
• [Critère 1.3 A] Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?
• [Critère 1.6 A] Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?
• [Critère 1.7 A] Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ?

Lier les images à leur légende

Troisième cas important pour l’accessibilité : les images légendées. C’est ainsi que l’on nomme les images immédiatement suivies par une description, une date ou encore un crédit.

Il est très facile d’ajouter des images légendées dans un article ou une page WordPress grâce au champ « Légende », présent lors de l’ajout ou de l’édition d’un média.

Pour assurer un support optimal avec les technologies d’assistance, il est conseillé d’ajouter un mot-clé dans le champ « Texte alternatif » et de le reprendre aussi dans la légende.

Dans l’article, la légende apparaîtra bien à proximité de la photo :

Note : dans le cas d’une image avec légende, l’alternative de l’image peut donc être renseignée même si l’image est une image de décoration.

Référence RGAA 4

• [Critère 1.9 A] Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ?

Conclusion

Maintenant que vous savez comment traiter vos images pour l’accessibilité dans WordPress, toutes les personnes qui consulteront votre site auront bien accès aux informations pertinentes transmises par les images porteuses d’information, images complexes et les images légendées.

Les images décoratives quant à elles ne créeront pas de bruit inutile pour les personnes aveugles et déficientes visuelles utilisant un lecteur d’écran.

En parallèle, n’hésitez pas à aller vérifier et corriger vos contenus déjà existants en vérifiant les alternatives de vos images.

Si l’aspect technique de votre thème vous intéresse, ne manquez pas nos autres articles consacrés à l’accessibilité de WordPress :

• WordPress et accessibilité : bien structurer les modèles de pages de son thème
• WordPress et accessibilité : faciliter la navigation (1^re partie)