La mise en forme visuelle de votre site est-elle entièrement gérée par les feuilles de style, sans résidus de formatage mélangés au contenu ?
Critère officiel 10.1 — Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Pourquoi c'est important
Les utilisateurs malvoyants qui personnalisent l'affichage — police plus grande, contraste élevé, couleurs inversées — remplacent les feuilles de style du site par les leurs. Si des mises en forme sont codées directement dans le texte (restes de copier-coller depuis Word), ces personnalisations cassent l'affichage ou font apparaître du texte dans des couleurs imposées indésirables.
Exemples concrets
Ce qui est conforme
Toute la mise en page est définie dans les feuilles de style CSS. Un utilisateur qui impose ses propres couleurs et sa propre police voit l'information dans le bon ordre, sans formatage résiduel perturbateur.
Ce qui pose problème
Un agent a collé un texte depuis Word dans l'éditeur WordPress. Des balises de couleur, de taille de police et d'espacement se sont glissées dans le code. Quand un utilisateur surcharge les styles, certains passages restent en rouge imposé, d'autres s'agrandissent de façon incontrôlée.
Comment agir
Évitez de coller du texte directement depuis Word ou Google Docs dans l'éditeur WordPress — les mises en forme s'importent avec le texte et polluent le code. Utilisez le collage en texte brut (Ctrl+Maj+V sous Windows, Cmd+Maj+V sur Mac), puis remettez en forme avec les blocs WordPress natifs.
Règles clés
- Les CSS peuvent présenter l'information — pas la créer.
- Si un pseudo-élément transmet une information, celle-ci doit aussi être dans le HTML (texte sr-only ou aria-label).
- Tester en désactivant les CSS : l'information est-elle encore complète ?
Erreurs fréquentes
- Icône CSS via content: seul indicateur d'un état (✓ = inclus, ✗ = exclu)
- Puce de liste CSS dont la couleur indique une priorité différente
Exemples de code
état porté uniquement par CSS
✗ Non conforme.inclus::before {
content: '✓ ';
color: green;
}
<li class="inclus">Stockage 10 Go</li>La coche et la couleur sont les seuls indicateurs d'inclusion. Sans CSS : 'Stockage 10 Go' — aucune indication de statut.
état avec texte accessible
✓ Conforme<li class="inclus">
<span aria-hidden="true">✓</span>
<span class="sr-only">Inclus :</span>
Stockage 10 Go
</li>Le ✓ est décoratif (aria-hidden). 'Inclus :' est masqué visuellement mais accessible aux AT. Sans CSS : 'Inclus : Stockage 10 Go'.
Référence WCAG : 1.3.1, 1.3.2