Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?
Un utilisateur qui impose sa propre feuille de styles pour grossir le texte ou inverser les couleurs ne peut pas surcharger les attributs HTML de présentation. <font color="red"> ou align="center" sont appliqués directement par le navigateur, en dehors de la cascade CSS. Sa personnalisation est ignorée, et la mise en page qu’il a configurée pour mieux lire devient inopérante.
Ce critère couvre trois types de violations. Première : les éléments HTML obsolètes à vocation purement décorative — <font>, <center>, <big>, <marquee>, <blink>, <basefont>, <s>, <strike>, <tt>. Deuxième : les attributs de présentation écrits directement dans le HTML — align, bgcolor, color, border, cellpadding, cellspacing, valign et une quinzaine d’autres. Troisième : les caractères d’espacement utilisés comme outil de mise en page (lettres espacées manuellement, colonnes simulées par des tabulations, tableaux faits d’espaces multiples).
HTML porte la structure. CSS porte la présentation. Ce principe a trente ans et reste le fondement de tout ce que CSS permet de surcharger, d’adapter, de personnaliser.
3 tests pour contrôler le bon usage des feuilles de styles
Absence de balises de présentation obsolètes
- Ouvrez l’inspecteur du navigateur ou le code source de la page.
- Recherchez les balises suivantes :
<basefont>,<big>,<blink>,<center>,<font>,<marquee>,<s>,<strike>,<tt>. - Si la page n’est pas déclarée en HTML5 (DOCTYPE absent, ou HTML 4 / XHTML), recherchez également la balise
<u>. - Si aucune de ces balises n’est présente, le test est validé. La moindre occurrence fait échouer le test.
Absence d'attributs de présentation HTML
- Inspectez le HTML généré de la page (DOM rendu, pas le template source).
- Vérifiez l’absence de ces attributs sur tous les éléments :
align,alink,background,bgcolor,border,cellpadding,cellspacing,char,charoff,clear,color,compact,frameborder,hspace,link,marginheight,marginwidth,text,valign,vlink,vspace. - Vérifiez l’absence de
size, sauf sur les éléments<select>(exception accordée). - Vérifiez l’absence de
widthetheight, sauf sur<img>,<object>,<embed>,<canvas>et<svg>(exception accordée). - Si aucun de ces attributs n’est présent en dehors des exceptions listées, le test est validé.
Absence d'espaces de mise en forme
- Désactivez les feuilles de styles de la page. Dans Firefox : menu Affichage > Style de la page > Aucun style. Avec l’extension Web Developer : CSS > Disable All Styles.
- Examinez le contenu textuel rendu sans CSS.
- Vérifiez l’absence d’espaces insérées manuellement entre les lettres d’un même mot (ex. :
A c c u e i l). - Vérifiez l’absence d’espaces ou de tabulations servant à créer des marges, des indentations ou des alignements visuels.
- Vérifiez l’absence de colonnes ou de structures tabulaires simulées par des espaces multiples ou des caractères de remplissage.
- Si aucune de ces pratiques n’est détectée, le test est validé.
Exemples
❌ Non conforme : Mise en forme via attributs HTML et balises obsolètes
<table border="1" cellpadding="8" cellspacing="0">
<tr bgcolor="#003366">
<th><font color="#ffffff" size="4">Produit</font></th>
<th><font color="#ffffff" size="4">Prix</font></th>
</tr>
<tr>
<td align="center">Abonnement mensuel</td>
<td align="center">9,90 €</td>
</tr>
</table>Les attributs border, cellpadding, cellspacing, bgcolor et align, ainsi que les balises <font> avec color et size, sont des attributs et éléments de présentation. Un utilisateur qui impose sa propre feuille de styles ne peut pas les surcharger. Un outil de lecture simplifiée les ignorera, laissant potentiellement la page sans mise en forme lisible.
✅ Conforme : Même tableau avec présentation déléguée à CSS
<table class="pricing-table">
<thead>
<tr>
<th>Produit</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abonnement mensuel</td>
<td>9,90 €</td>
</tr>
</tbody>
</table>
<style>
.pricing-table { border-collapse: collapse; }
.pricing-table th { background-color: #003366; color: #fff; font-size: 1.25rem; padding: 8px; text-align: center; }
.pricing-table td { text-align: center; padding: 8px; border: 1px solid #ccc; }
</style>Toute la présentation est déléguée à CSS via une classe. Un utilisateur peut désactiver ou surcharger ces styles selon ses besoins. La structure sémantique du tableau (<thead>, <th>, <td>) est préservée et reste lisible même sans CSS.
❌ Non conforme : Espaces pour simuler un alignement (test 10.1.3)
<p>Nom : Dupont</p>
<p>Prénom : Jean</p>
<p>Email : [email protected]</p>Des espaces insécables sont utilisées pour aligner visuellement les deux-points. Avec CSS actif, l’alignement semble correct. Sans CSS, un lecteur d’écran annoncera ces espaces de manière incohérente ou les ignorera. La mise en page doit venir de CSS (display: grid, ou une liste de définitions <dl> / <dt> / <dd>).
Astuces et pièges
⚠️ <s> n’a pas d’exception HTML5 dans le RGAA
Contrairement à <u> (acceptable en HTML5 car redéfini avec une sémantique précise), <s> est interdit par le test 10.1.1 sans exception, même en HTML5. C’est l’erreur la plus fréquente chez les développeurs qui connaissent la distinction HTML4 / HTML5 : ils s’attendent à une exception symétrique, elle n’existe pas. Utilisez <del> si le contenu a été supprimé éditoralement, ou appliquez la mise en forme barrée via text-decoration: line-through en CSS si c’est purement visuel.
⚠️ width et height sur <img> sont autorisés
Les attributs width et height sur <img>, <object>, <embed>, <canvas> et <svg> sont explicitement exclus du test 10.1.2. Ces attributs réservent l’espace avant le chargement de l’image et évitent le décalage de mise en page (layout shift) : c’est une fonction technique, pas du style. De même, size sur <select> est toléré car il contrôle le nombre de lignes visibles dans la liste déroulante, une fonctionnalité de l’élément.
⚠️ Les éditeurs WYSIWYG sont la première source d’infractions
En audit, la majorité des occurrences de <font>, align ou bgcolor proviennent du contenu saisi via un éditeur riche (TinyMCE, CKEditor, Quill) mal configuré : copier-coller depuis Word, génération de balises obsolètes au formatage. Configurez votre éditeur pour interdire ces attributs et éléments en sortie, ou nettoyez le HTML côté serveur avant persistance.
💡 Vérifiez le DOM rendu, pas le template source
Le test 10.1.2 précise « code source généré ». Si votre CMS injecte des attributs de présentation au moment du rendu, le test échoue même si votre template est propre. Depuis la console du navigateur, la commande document.querySelectorAll('[align], [bgcolor], [color], [cellpadding], [cellspacing]') liste toutes les occurrences en une seule passe.
⚠️ Le test 10.1.3 est invisible sans désactivation réelle des styles
Auditer les espaces de mise en forme sans désactiver les CSS est impossible : avec les styles actifs, un mot espacé lettre par lettre peut paraître visuellement anodin. Utilisez l’extension Web Developer (Firefox ou Chrome) ou le menu Affichage > Style de la page > Aucun style de Firefox. L’inspecteur de développement seul ne révèle pas ce type d’infraction.
Questions fréquentes
Pourquoi les balises <b> et <i> posent-elles problème pour le critère RGAA 10.1 ?
Non. Ces deux éléments ne figurent pas dans la liste du test 10.1.1. En HTML5, <b> signale un texte à attirer l’attention sans importance particulière (mots-clés, noms de produits) et <i> marque un texte dans une voix différente (termes techniques, mots étrangers) : ils ne sont plus purement présentationnels. Si vous les utilisez uniquement pour du gras ou de l’italique sans intention sémantique, préférez CSS — bonne pratique, pas obligation RGAA 10.1.
Comment le critère RGAA 10.1 traite-t-il l'utilisation de l'attribut style inline ?
Non. L’attribut style fait partie de CSS, même écrit dans le HTML : il peut être surchargé avec !important dans une feuille utilisateur. Ce que le critère 10.1 cible, ce sont les attributs de présentation HTML non-CSS (align, bgcolor, color…) et les éléments HTML dédiés à la présentation. Les styles inline sont une question de maintenabilité, pas une violation de ce critère.
Comment auditer efficacement le test RGAA 10.1.2 sur une page web dense ?
Depuis la console JavaScript du navigateur, lancez document.querySelectorAll('[align], [bgcolor], [color], [cellpadding], [cellspacing], [valign], [border]'). Cela retourne immédiatement toutes les occurrences avec leur position dans le DOM. Pour une couverture complète de la liste RGAA, adaptez le sélecteur pour inclure [alink], [vlink], [hspace], [vspace], [marginheight], [marginwidth].
Quand un site HTML5 échoue-t-il malgré tout au test d'accessibilité RGAA 10.1.1 ?
Oui, facilement. En HTML5, <u> est accepté (exception explicite du test), mais <center>, <font>, <big>, <marquee>, <blink>, <basefont>, <s>, <strike> et <tt> restent interdits. Le navigateur continue de les afficher sans erreur visible. Un copier-coller depuis un document Word ou un ancien site, ou un CMS mal configuré, peut les introduire silencieusement.