WCAG APrestataireMoyen

Chaque lien de votre site possède-t-il un texte lisible ou une description ?

Critère officiel 6.2 — Dans chaque page web, chaque lien a-t-il un intitulé ?

Pourquoi c'est important

Un lien sans texte est annoncé par les logiciels de lecture sous forme d'adresse brute (« lien : https://mairie-… ») ou ignoré. Sur mobile avec commande vocale, il est impossible de l'activer par la voix. Les liens d'icônes sans description — réseaux sociaux, boutons picto — sont les plus fréquemment concernés.

Exemples concrets

Ce qui est conforme

L'icône Facebook du pied de page est un lien avec un texte techniquement associé : « Page Facebook de la commune de Saint-Gilles ». Il n'est pas visible à l'écran mais annoncé par le logiciel de lecture. La personne aveugle sait exactement où ce lien mène.

Ce qui pose problème

La même icône Facebook est un lien sans aucun texte ni description. Le logiciel de lecture annonce « lien » ou l'URL complète. L'utilisateur ne sait pas si c'est Facebook, Twitter ou un autre réseau.

Comment agir

Ce problème est d'origine technique : un lien créé avec une icône seule, sans texte alternatif. Signalez à votre prestataire tout lien qui n'a pas de texte visible : icônes de réseaux sociaux, boutons picto, liens images. Dans WordPress, les blocs d'icônes de réseaux sociaux doivent systématiquement avoir un texte accessible déclaré.

Mise en œuvre avec WordPress FSE

Dans l'éditeur, sans code

Le piège le plus fréquent en FSE est le lien constitué uniquement d'une image sans texte alternatif — typiquement une icône de réseau social, une loupe de recherche ou un pictogramme cliquable. Sans alt sur l'image, le lien n'a littéralement aucun intitulé pour un logiciel de lecture. Pour les réseaux sociaux, utilisez le bloc Icônes sociales (wp:social-links) natif : il génère automatiquement des intitulés corrects (« Facebook », « LinkedIn », etc.) et vous n'avez rien à configurer. Pour tout autre lien constitué d'une image, remplissez obligatoirement le champ Texte alternatif de l'image avec un intitulé décrivant la destination du lien — pas l'image elle-même.

Balisage de bloc

<!-- À éviter : lien-image sans alternative textuelle -->
<!-- wp:paragraph -->
<p><a href="https://facebook.com/commune-plogonnec"><img src="/icons/facebook.svg" alt="" /></a></p>
<!-- /wp:paragraph -->

<!-- Version correcte : bloc Icônes sociales natif -->
<!-- wp:social-links -->
<ul class="wp-block-social-links">
  <!-- wp:social-link {"url":"https://facebook.com/commune-plogonnec","service":"facebook","label":"Page Facebook de la commune"} /-->
  <!-- wp:social-link {"url":"https://linkedin.com/company/commune-plogonnec","service":"linkedin","label":"Page LinkedIn de la commune"} /-->
</ul>
<!-- /wp:social-links -->

<!-- Lien-image custom : texte alternatif qui décrit la destination -->
<!-- wp:paragraph -->
<p><a href="/recherche"><img src="/icons/loupe.svg" alt="Rechercher sur le site" /></a></p>
<!-- /wp:paragraph -->

Section complémentaire pour les sites utilisant WordPress en édition complète (FSE). Les principes RGAA exposés plus haut s'appliquent à tous les CMS.

Règles clés

Tout lien doit avoir un texte accessible non vide : texte visible, aria-label, ou alt sur l'image enfant.
Lien image : alt sur l'<img> ou aria-label sur le <a>.
Lien icône SVG : aria-label sur le <a>, SVG avec aria-hidden='true'.

Erreurs fréquentes

Lien image sans attribut alt
Lien icône SVG avec aria-hidden sur l'icône et pas d'aria-label sur le <a>
Lien avec uniquement des espaces comme texte

Exemples de code

lien icône sans intitulé

✗ Non conforme

<a href="/accueil">
  <svg aria-hidden="true">
    <use href="#icon-home"/>
  </svg>
</a>

Le SVG est masqué aux AT. Le lien n'a aucun texte accessible : annoncé 'lien' vide.

lien icône avec aria-label

✓ Conforme

<a href="/accueil" aria-label="Accueil">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-home"/>
  </svg>
</a>

aria-label sur le <a> fournit l'intitulé. Le SVG reste masqué : le nom vient du <a>, pas de l'image.

Référence WCAG : 1.1.1, 2.4.4

⚠Pourquoi c'est important

Exemples concrets

✓Ce qui est conforme

✗Ce qui pose problème

💡Comment agir

✓Règles clés

⚠Erreurs fréquentes