WCAG A Votre équipe + Prestataire Moyen

Toutes les informations de votre site restent-elles visibles si les styles graphiques sont désactivés ?

Critère officiel 10.2 — Dans chaque page web, le contenu visible porteur d’information reste-t-il présent lorsque les feuilles de styles sont désactivées ?

Pourquoi c'est important

Certaines technologies d'assistance désactivent les feuilles de style pour simplifier la lecture ou imposer leur propre affichage. Si une information importante est intégrée dans une image de fond CSS ou dépend d'un effet visuel, elle disparaît complètement — l'utilisateur voit une page vide à cet endroit.

Exemples concrets

Ce qui est conforme

La bannière « Fermeture exceptionnelle de la mairie le 8 mai » est rédigée en texte dans un bloc WordPress. Elle reste visible quelle que soit la configuration de l'utilisateur, même sans styles.

Ce qui pose problème

La même information est incrustée dans une image de fond décorative sur la page d'accueil. Quand les styles sont désactivés, l'image disparaît entièrement — seule la page blanche reste. L'information de fermeture n'est plus accessible.

Comment agir

Ne transmettez jamais d'information importante uniquement via une image ou un effet graphique. Les textes d'alerte, fermetures exceptionnelles et informations urgentes doivent toujours être écrits en texte réel dans un bloc WordPress — pas incrustés dans une bannière image. Test : dans Firefox, menu Affichage → Style de la page → Aucun style. Vérifiez que les informations essentielles restent lisibles.

Mise en œuvre avec WordPress FSE

Dans l'éditeur, sans code

Les blocs natifs de WordPress FSE ne masquent jamais de contenu par défaut — tout ce que vous voyez dans l'éditeur sera visible dans le site final. Le risque apparaît quand votre prestataire utilise des classes CSS personnalisées pour masquer des éléments selon la taille d'écran (typiquement « cacher sur mobile », « visible uniquement sur desktop »). Ces classes utilisent généralement display: none, ce qui retire complètement l'information — aussi bien visuellement que pour les logiciels de lecture. Si un contenu est important, il doit être visible sur tous les supports, avec une adaptation si nécessaire. Si vous voulez masquer visuellement un texte tout en le gardant accessible aux lecteurs d'écran (par exemple un intitulé de bouton implicite), utilisez la classe WordPress screen-reader-text qui est prévue pour ça.

Balisage de bloc

<!-- À éviter : information cachée avec display: none, inaccessible aux lecteurs d'écran -->
<!-- wp:paragraph {"className":"hide-on-mobile"} -->
<p class="hide-on-mobile">Horaires d'ouverture : du lundi au vendredi, 9h-17h</p>
<!-- /wp:paragraph -->

<!-- Version correcte : information visible sur tous les supports, adaptée si besoin par le CSS fluide -->
<!-- wp:paragraph -->
<p>Horaires d'ouverture : du lundi au vendredi, 9h-17h</p>
<!-- /wp:paragraph -->

<!-- Masquage visuel intentionnel d'un texte utile aux seuls lecteurs d'écran -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
  <!-- wp:button -->
  <div class="wp-block-button">
    <a class="wp-block-button__link" href="/recherche">
      🔍 <span class="screen-reader-text">Rechercher sur le site</span>
    </a>
  </div>
  <!-- /wp:button -->
</div>
<!-- /wp:buttons -->

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 contenu informatif doit être dans le HTML — pas uniquement dans le CSS.
La technique text-indent:-9999px est à éviter — préférer clip masking (sr-only).
Tester avec l'extension Web Developer Toolbar > CSS > Disable All Styles.

Erreurs fréquentes

Texte positionné hors viewport via text-indent:-9999px
Contenu textuel uniquement dans une image background-image
Icônes informatives uniquement via font-icon CSS sans texte alternatif

Exemples de code

texte caché via text-indent

✗ Non conforme

.logo-texte {
  text-indent: -9999px;
  background-image: url('logo.png');
  width: 200px; height: 60px;
}

Sans CSS, background-image disparaît et le texte reste hors de l'écran — logo invisible.

logo avec alt sur l'image

✓ Conforme

<a href="/">
  <img src="logo.png"
    alt="Nom du site — Retour à l'accueil"
    width="200" height="60">
</a>

L'alt de l'image transmet l'information sans dépendre du CSS.

Référence WCAG : 1.1.1, 1.3.1

⚠ Pourquoi c'est important

Exemples concrets

✓ Ce qui est conforme

✗ Ce qui pose problème

💡 Comment agir

✓ Règles clés

⚠ Erreurs fréquentes