Présentation de l'information

La présentation de l'information désigne la manière dont le contenu est visuellement mis en forme sur une page web : couleurs, polices, espacements, positionnement. En accessibilité, le principe est strict : toute la mise en forme passe par CSS, jamais par des balises HTML détournées. Le contenu doit rester compréhensible quand les styles sont désactivés ou modifiés par l'utilisateur.

Désactivez les CSS de n'importe quelle page web. Si le contenu perd son ordre et que des informations disparaissent, la présentation de l'information est mal gérée. C'est exactement ce que vérifie la thématique 10 du RGAA, avec 14 critères dédiés.

#Pourquoi séparer contenu et mise en forme ?

Un lecteur d'écran ne lit pas le CSS. Il parcourt le HTML, dans l'ordre du DOM. Si votre mise en page repose sur des <table> au lieu de Flexbox, ou si un <br> simule une marge entre deux blocs, la structure que perçoit l'utilisateur voyant n'existe pas pour un utilisateur de technologie d'assistance.

Le critère WCAG 1.3.1 résume le principe : toute information transmise par la présentation visuelle doit aussi être déterminable par programme. Votre gras décoratif ? Du CSS. Votre titre en gros ? Une balise <h2>, pas un <span> avec font-size: 24px.

<!-- Mauvais : HTML détourné pour la mise en forme -->
<span style="font-size: 24px; font-weight: bold;">Mon titre</span>
<br><br>
 
<!-- Bon : sémantique HTML + CSS séparé -->
<h2>Mon titre</h2>

#Le piège de l'ordre visuel

CSS Grid et Flexbox permettent de réorganiser visuellement les éléments avec order ou grid-row. Le problème : la navigation au clavier et les lecteurs d'écran suivent l'ordre du DOM, pas l'ordre CSS.

Vous placez un bouton « Acheter » en premier visuellement avec order: -1, mais dans le DOM il arrive après trois paragraphes ? Un utilisateur au clavier devra tabuler à travers tout le texte avant de l'atteindre. Le critère WCAG 1.3.2 exige que l'ordre de lecture programmatique corresponde à l'ordre significatif du contenu.

#Masquer sans faire disparaître

display: none retire un élément de l'écran et de l'arbre d'accessibilité. Pour masquer du texte visuellement tout en le gardant lisible par les lecteurs d'écran, utilisez la technique .visually-hidden :

.visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

L'inverse existe aussi : aria-hidden="true" cache un élément aux lecteurs d'écran sans le retirer de l'affichage. Utile pour les icônes décoratives placées à côté d'un texte déjà explicite.

#En résumé

HTML porte le sens, CSS porte l'apparence. Testez vos pages sans styles : si le contenu reste lisible et ordonné, la séparation est correcte. Vérifiez que l'ordre du DOM correspond à l'ordre visuel, et choisissez la bonne technique de masquage selon votre besoin.