Présentation de l’information

Critère 10.1Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ?

Ce que ça vérifie — Ce critère vérifie que la présentation (couleurs, polices, positionnement, tailles) est gérée par des feuilles de styles CSS et non par des balises ou attributs de présentation obsolètes. Cela garantit une séparation nette entre le fond (le contenu) et la forme.

Comment corriger — Bannissez les balises et attributs de présentation HTML (font, center, align, bgcolor, u...) et déportez toute la mise en forme dans des fichiers CSS. Privilégiez les feuilles de styles externes liées via <link>.

/* À éviter */
<font color="red"><center>Titre</center></font>

/* Recommandé */
<h1 class="titre">Titre</h1>
.titre { color: #c00; text-align: center; }

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

Ce que ça vérifie — Ce critère vérifie que le contenu porteur d'information reste présent et accessible lorsque les feuilles de styles sont désactivées. Aucune information utile ne doit être générée uniquement par CSS (via content, images de fond signifiantes...).

Comment corriger — Placez toute information dans le HTML plutôt que dans la CSS. N'utilisez pas la propriété content ni les background-image pour véhiculer une information indispensable à la compréhension.

/* À éviter : l'info n'existe que dans la CSS */
.statut::before { content: "En rupture de stock"; }

/* Recommandé : l'info est dans le HTML */
<span class="statut">En rupture de stock</span>

Critère 10.3Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?

Ce que ça vérifie — Ce critère vérifie que l'information reste compréhensible et que l'ordre de lecture reste cohérent une fois les feuilles de styles désactivées. L'ordre du contenu dans le code source doit correspondre à un enchaînement logique.

Comment corriger — Structurez le HTML dans l'ordre logique de lecture et ne comptez pas sur le positionnement CSS (float, position absolute, order flex/grid) pour rétablir un sens qui n'existe pas dans la source. Vérifiez en désactivant les CSS que le contenu se lit naturellement.

Critère 10.4Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200 %, au moins (hors cas particuliers) ?

Ce que ça vérifie — Ce critère vérifie que le texte reste entièrement lisible lorsque l'utilisateur agrandit la taille des caractères jusqu'à 200 %, sans perte d'information ni chevauchement. Les personnes malvoyantes s'appuient sur ce zoom texte pour lire confortablement.

Comment corriger — Dimensionnez le texte et les conteneurs avec des unités relatives (rem, em, %) plutôt que des pixels figés, et évitez les hauteurs fixes qui tronquent le texte. Testez le rendu à 200 % et laissez les conteneurs s'adapter (min-height plutôt que height).

/* À éviter : tout est figé en px */
.carte { font-size: 14px; height: 60px; }

/* Recommandé : unités relatives, hauteur souple */
html { font-size: 100%; }
.carte { font-size: 0.875rem; min-height: 3.75rem; }

Critère 10.5Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ?

Ce que ça vérifie — Ce critère vérifie la cohérence des déclarations CSS de couleurs : dès qu'une couleur de police est définie, une couleur de fond doit l'être aussi (et inversement) sur le même élément ou un parent. On évite ainsi qu'une feuille de styles utilisateur ne crée un texte illisible (texte clair sur fond clair).

Comment corriger — Déclarez toujours color et background-color par paire pour les éléments porteurs de texte. Ne vous reposez jamais sur la seule couleur par défaut du navigateur pour l'un des deux.

/* À éviter : couleur de texte seule */
.alerte { color: #fff; }

/* Recommandé : les deux couleurs sont définies */
.alerte { color: #fff; background-color: #b30000; }

Critère 10.6Dans chaque page web, chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ?

Ce que ça vérifie — Ce critère vérifie que chaque lien noyé dans un texte (dont la nature de lien n'est pas évidente par son contexte) est visuellement distinct du texte environnant autrement que par la seule couleur. Une différence de couleur seule n'est pas perceptible par tous, notamment en cas de daltonisme.

Comment corriger — Soulignez les liens dans le corps de texte, ou distinguez-les par un autre marqueur visuel non chromatique (icône, graisse combinée à un repère). Si vous retirez le soulignement, le rétablir au survol et au focus ne suffit pas : il doit être visible en permanence.

/* À éviter : le lien ne se distingue que par la couleur */
p a { text-decoration: none; color: #06c; }

/* Recommandé : soulignement permanent */
p a { color: #06c; text-decoration: underline; }

Critère 10.7Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?

Ce que ça vérifie — Ce critère vérifie que la prise de focus est visible pour tout élément qui peut le recevoir (liens, boutons, champs...). Les personnes naviguant au clavier doivent voir en permanence où elles se trouvent dans la page.

Comment corriger — Ne supprimez jamais l'outline sans le remplacer par un indicateur de focus visible et contrasté. Utilisez :focus-visible pour offrir un focus net au clavier, et vérifiez un contraste suffisant avec le fond.

/* À éviter : le focus disparaît */
a:focus { outline: none; }

/* Recommandé : focus visible et contrasté */
a:focus-visible {
  outline: 2px solid #0055cc;
  outline-offset: 2px;
}

Critère 10.8Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ?

Ce que ça vérifie — Ce critère vérifie que les contenus masqués visuellement mais destinés à être ignorés (contenus purement décoratifs ou temporairement cachés) sont bien retirés du flux d'accessibilité, et qu'inversement les contenus masqués mais utiles restent restitués. La technique de masquage doit correspondre à l'intention.

Comment corriger — Pour cacher un contenu à tout le monde, utilisez display:none ou visibility:hidden (ou hidden / aria-hidden="true"). Pour un contenu visible seulement des lecteurs d'écran, utilisez une classe de masquage visuel accessible plutôt que display:none.

/* Masquage visuel accessible (reste lu par les lecteurs d'écran) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

Critère 10.9Dans chaque page web, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ?

Ce que ça vérifie — Ce critère vérifie que l'information n'est jamais transmise uniquement par la forme, la taille ou la position d'un élément. Ces indices visuels ne sont pas perçus par les personnes aveugles ou malvoyantes.

Comment corriger — Doublez tout repère visuel (forme, taille, emplacement) par une information textuelle explicite. Par exemple, n'écrivez pas « cliquez sur le bouton à droite » mais nommez-le, et ne signalez pas un champ obligatoire par sa seule position.

/* À éviter */
<p>Validez avec le bouton en bas à droite.</p>

/* Recommandé */
<p>Validez avec le bouton « Enregistrer ».</p>

Critère 10.10Dans chaque page web, l’information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ?

Ce que ça vérifie — Ce critère complète le 10.9 en vérifiant que l'alternative à un repère de forme, taille ou position est effectivement pertinente et compréhensible. L'information de substitution doit lever toute ambiguïté.

Comment corriger — Assurez-vous que le texte de remplacement identifie sans équivoque l'élément ou l'action concernée, indépendamment de tout indice visuel. Relisez chaque consigne en imaginant qu'aucune indication spatiale ou graphique n'est perceptible.

Critère 10.11Pour chaque page web, les contenus peuvent-ils être présentés sans perte d’information ou de fonctionnalité et sans avoir recours soit à un défilement vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ?

Ce que ça vérifie — Ce critère vérifie que les contenus se réagencent (reflow) sans perte d'information ni de fonctionnalité, et sans imposer de défilement dans les deux directions, dans une fenêtre équivalente à 320 px de large (contenus verticaux) ou 256 px de haut (contenus horizontaux). Cela correspond à un zoom à 400 % sur un écran de bureau.

Comment corriger — Adoptez une conception responsive fondée sur des unités fluides, flexbox ou grid, et des media queries, en évitant les largeurs fixes. Seuls certains contenus (tableaux de données, code, cartes) peuvent conserver un défilement dans une seule direction.

/* Reflow sans scroll horizontal à 320px */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
img { max-width: 100%; height: auto; }

/* Tableau large : scroll autorisé sur un seul axe */
.tableau-scroll { overflow-x: auto; }

Critère 10.12Dans chaque page web, les propriétés d’espacement du texte peuvent-elles être redéfinies par l’utilisateur sans perte de contenu ou de fonctionnalité (hors cas particuliers) ?

Ce que ça vérifie — Ce critère vérifie que l'utilisateur peut redéfinir les propriétés d'espacement du texte (interlignage, espacement des lettres, des mots et des paragraphes) sans perte de contenu ni de fonctionnalité. Certaines personnes dyslexiques appliquent ces réglages pour améliorer leur lecture.

Comment corriger — Évitez les hauteurs fixes et les débordements masqués (overflow:hidden) sur les conteneurs de texte, afin que celui-ci puisse s'aérer sans être tronqué. Testez avec un bookmarklet appliquant line-height:1.5, letter-spacing:0.12em, word-spacing:0.16em et un espacement de paragraphe de 2em.

/* Valeurs cibles à supporter sans casse */
p {
  line-height: 1.5;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
  margin-bottom: 2em;
}
/* Le conteneur ne doit pas tronquer : évitez height fixe + overflow:hidden */

Critère 10.13Dans chaque page web, les contenus additionnels apparaissant à la prise de focus ou au survol d’un composant d’interface sont-ils contrôlables par l’utilisateur (hors cas particuliers) ?

Ce que ça vérifie — Ce critère vérifie que les contenus additionnels apparaissant au survol ou à la prise de focus (infobulles, sous-menus) sont contrôlables par l'utilisateur. Ils doivent pouvoir être fermés, rester affichés quand on survole leur contenu, et persister tant qu'on ne les quitte pas volontairement.

Comment corriger — Rendez ces contenus dismissibles (fermeture au clavier via Échap sans déplacer le focus), hoverable (le pointeur peut passer sur l'infobulle sans la faire disparaître) et persistants (ils restent tant que le survol ou le focus est actif). N'utilisez pas de fermeture automatique par minuterie.

// Rendre une infobulle dismissible au clavier
tooltip.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') tooltip.hidden = true;
});
/* hoverable : le déclencheur et l'infobulle partagent une zone de survol continue */

Critère 10.14Dans chaque page web, les contenus additionnels apparaissant via les styles CSS uniquement peuvent-ils être rendus visibles au clavier et par tout dispositif de pointage ?

Ce que ça vérifie — Ce critère vérifie que les contenus additionnels rendus visibles via des pseudo-classes CSS (:hover, :focus) au pointage sont aussi atteignables et affichables au clavier seul. Un menu ou une infobulle accessible uniquement à la souris exclut les personnes naviguant au clavier.

Comment corriger — Doublez systématiquement :hover par :focus et :focus-within pour que le contenu apparaisse aussi lors de la navigation clavier. Assurez-vous que le déclencheur peut recevoir le focus (élément interactif natif ou tabindex adapté).

/* Affichage au survol ET au clavier */
.menu > .sous-menu { display: none; }
.menu:hover > .sous-menu,
.menu:focus-within > .sous-menu { display: block; }