Balisage de présentation obsolète : <center>, <font> et l'attribut align
HTML4 brouillait la frontière entre structure et présentation : des balises comme <center> et <font>, et des attributs comme align, existaient uniquement pour contrôler l'apparence, inscrite directement dans le balisage au lieu d'être laissée au CSS. HTML5 a abandonné ou déprécié la plupart d'entre eux - non par préférence stylistique, mais parce que mêler la présentation au balisage structurel rend le contenu plus difficile à interpréter de façon fiable par les technologies d'assistance (ainsi que par les moteurs de recherche et lors des refontes futures).
Cela relève du critère de succès 1.3.1 des WCAG (Information et relations), niveau A - le même critère qui impose que titres, listes et tableaux soient balisés conformément à ce qu'ils sont réellement.
Les éléments obsolètes et leurs remplaçants
| Obsolète | À remplacer par |
|---|---|
<center> | CSS text-align: center (pour du texte) ou margin: 0 auto (pour un élément de bloc) |
<font> | Les propriétés CSS font-family, font-size et color |
<big> | Une valeur CSS de font-size |
<strike> | <s> ou <del> si le sens est réellement sémantique (un prix barré, une suppression suivie), ou la propriété CSS text-decoration: line-through si l'effet est purement visuel |
<tt> | <code> ou <kbd> s'il s'agit de code ou d'une saisie utilisateur, ou la propriété CSS font-family: monospace si l'effet est purement visuel |
Attribut align (sur tout élément) | CSS text-align, margin, Flexbox ou Grid, selon la mise en page visée |
<!-- Avant -->
<center><font color="red" size="5">Promotion valable aujourd'hui</font></center>
<td align="center">Confirmé</td>
<!-- Après -->
<p style="text-align: center; color: red; font-size: 1.5rem;">Promotion valable aujourd'hui</p>
<td style="text-align: center;">Confirmé</td>
Pourquoi cela revient sur les contenus anciens ou embarqués
Presque personne n'écrit encore de balises <center> dans une base de code moderne. Cette non-conformité apparaît surtout dans des modules tiers embarqués, dans des contenus hérités d'un CMS jamais migrés, ou dans du HTML produit par un ancien outil d'export (certains gabarits de courriel et convertisseurs PDF vers HTML émettent encore ce balisage par défaut). Ce motif est assez répandu pour qu'une analyse automatisée de presque n'importe quel site comportant du contenu hérité ou embarqué le fasse remonter parmi les premiers résultats.
La stratégie de correction concrète
Si le balisage vient de vos propres gabarits, remplacez-le directement à l'aide du tableau ci-dessus. S'il provient d'un module embarqué ou d'un script tiers que vous ne maîtrisez pas, les options réalistes sont : demander au prestataire un code d'intégration à jour, remplacer le module par une alternative moderne, ou - si rien de cela n'est possible - l'assumer comme une limite connue et documentée plutôt que de l'ignorer silencieusement. Un rapport de conformité WCAG a précisément vocation à exposer ce qui n'a pas été corrigé et pourquoi, pas seulement ce qui l'a été.
Références officielles
Questions fréquentes
- Pourquoi des balises comme center et font posent-elles problème ?
- Elles mêlent l'apparence du contenu au balisage au lieu de la laisser au CSS. Ce balisage de présentation obsolète peut dérouter les technologies d'assistance et n'est plus du HTML5 valide.
- Par quoi remplacer les balises de présentation obsolètes ?
- Par du CSS : `text-align` à la place de `<center>` ou de l'attribut `align`, et `font-family`, `font-size` et `color` à la place de `<font>`. Réservez le HTML à la structure et au sens.
- Utiliser center ou font constitue-t-il automatiquement un échec WCAG ?
- C'est du HTML5 invalide, et cela va à l'encontre du critère 1.3.1 en brouillant la structure. La correction fiable consiste à déplacer toute la présentation dans le CSS et à réserver le HTML à la sémantique.
Articles liés
Vous souhaitez connaître le score de votre propre site ?
Lancer un test d'accessibilité gratuit