WordPress et accessibilité : comment rendre les liens accessibles ?

En effet, lors de nos audits, nous constatons que les critères du RGAA sur les liens sont souvent non conformes. Les principales erreurs de contribution concernent les liens-images.

Voici donc nos conseils pour faire des liens HTML avec WordPress sans problème d’accessibilité !

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.

Créer un intitulé de lien

Pour commencer, un lien doit toujours avoir un intitulé pertinent et explicite.

L’intitulé correspond, la plupart du temps, au texte visible cliquable. L’intitulé doit être pertinent pour que l’on puisse comprendre vers quoi redirige la page.

Cependant, un lien peut prendre d’autres formes qu’un texte cliquable.

Fournir un intitulé pertinent à un lien-image

L’obligation pour un lien d’avoir un intitulé est une règle en apparence simple. Pourtant, elle est souvent oubliée dans le cas des liens-images, c’est-à-dire lorsqu’un lien contient uniquement une image, et pas de texte.

Dans le cas d’un lien-image, c’est l’alternative de l’image (attribut alt) qui va jouer le rôle d’intitulé de lien pour les technologies d’assistance.

Plusieurs solutions sont possibles :

• le lien-image contient une image décorative : dans ce cas, l’image doit avoir une alternative renseignée qui indique vers quoi redirige le lien. Par exemple, si l’image cliquable renvoie vers un article, le plus simple est de reprendre le titre de l’article en alternative ;
• le lien-image contient une image sur laquelle un texte est visible : dans ce cas, l’alternative de l’image doit au minimum reprendre ce texte visible.

Par exemple, le lien-image ci-dessous contient du texte « Les Scop ». L’intitulé du lien sera donc donné par l’alternative renseignée lors de l’ajout de l’image, et celle-ci devra bien reprendre le texte visible sur l’image. Ici, ce sera « Les Scop ».

Ajouter un intitulé à un lien « composite »

On rencontre également de nombreux liens constitués d’un texte et d’une image : dans le jargon du RGAA, on les appelle des liens composites.

Dans ce cas, si le texte visible est suffisamment explicite pour comprendre vers quoi redirige le lien, c’est ce texte qui sera considéré comme l’intitulé du lien.

L’image devient alors décorative et son alternative doit être vide (alt="").

Par exemple, si le lien englobe à la fois du texte, comme « Access42 est membre du réseau des Scop d’Île-de-France », et une image représentant le logo des Scop, cette image devra être considérée comme décorative — même si celle-ci contient du texte, comme «  Les Scop » —, puisque le texte adjacent à l’image contient déjà la même information que celle que l’on peut voir sur l’image.

Aucune perte d’information ne sera à déplorer : les personnes aveugles ou très malvoyantes qui utilisent un lecteur d’écran auront bien accès à l’information, comme tout le monde.

Références RGAA 4

• [Critère 6.1 A] Chaque lien est-il explicite (hors cas particuliers) ?
• [Critère 6.2 A] Dans chaque page web, chaque lien a-t-il un intitulé ?

Conclusion

Donner un intitulé pertinent à chaque lien permettra à vos liens d’être compris et utilisables par les personnes handicapées ayant recours à des technologies d’assistance, quel que soit le format du lien : lien texte, lien-image ou lien composite.

Nous vous invitons donc à vérifier vos liens dès à présent, et les corriger si nécessaire.

Maintenant que l’accessibilité des liens dans WordPress n’a plus de secret pour vous, savez-vous comment définir la structure d’un article dans votre éditeur ? Non ? Ça tombe bien : c’est ce dont traite notre nouvel article !