RGAA Lab

Composants accessibles

La page sans ses styles

Désactiver la feuille de styles prend dix secondes et montre deux choses d'un coup : ce qui n'existait que par le CSS, et l'ordre réel du contenu. C'est celui que suit un lecteur d'écran.

5 critères RGAA en jeu

Essayez-la

Quel code, et avec ou sans sa feuille de styles ?

Critère 1.1 — Chaque image porteuse d’information a-t-elle une alternative textuelle ?

Statut : Non conforme

Ce que la carte contient, ce que l’œil y lit

Dans le code

À l’écran

Mesuré à l’instant : l’ordre du code et l’ordre à l’écran diffèrent.

Le badge contient dans le code, et se lit à l’écran.

La démo s’ouvre sur le code corrigé, et les deux colonnes coïncident déjà : la feuille de styles s’applique, elle place sans ordonner. Passez au code fautif — rien ne bouge à l’écran, et les deux listes divergent ; désactivez ensuite ses styles, et elles se rejoignent, mais seulement parce que la mise en forme a disparu. Les colonnes ne sont pas écrites dans la démo : l’ordre des nœuds d’un côté, les coordonnées réelles des boîtes de l’autre, relus après chaque bascule. Parcourez enfin la carte à la tabulation dans l’état fautif : le focus visite « Critère précédent » avant « Critère suivant », c’est-à-dire de droite à gauche.

Cette démo existe aussi en page autonome.

L’erreur courante

Une carte dont la feuille de styles porte à la fois du texte et l’ordre de lecture.

<!-- À ne pas faire -->
<article class="resultat">
	<p class="badge">Non conforme</p>
	<h3>Critère 1.1 — Images porteuses d’information</h3>
</article>
/* À ne pas faire : le mot « Statut » n’existe que dans cette feuille */
.badge::before {
	content: 'Statut : ';
}

/* À ne pas faire : le titre remonte à l’écran, et nulle part ailleurs */
.resultat {
	display: flex;
	flex-direction: column;
}
.resultat h3 {
	order: -1;
}

À l’écran, la carte se lit « Critère 1.1 — Images porteuses d’information », puis « Statut : Non conforme ». C’est la seule version que verra jamais la personne qui l’a codée.

Dans le code, elle se lit « Non conforme », puis « Critère 1.1 ». L’état arrive avant ce qu’il qualifie, et le mot qui le désignait a disparu : content n’est pas du contenu, c’est de la mise en forme qui s’est mise à parler. Un lecteur d’écran suit cet ordre-là, un mode lecture aussi, une traduction automatique aussi, et la recherche dans la page ne trouvera jamais « Statut ».

Les mêmes causes, sous d’autres formes :

  • Une image de fond CSS porteuse d’information. Le pictogramme d’alerte posé en background-image ne laisse rien derrière lui quand les styles tombent — et il n’a jamais rien laissé à une technologie d’assistance.
  • row-reverse, column-reverse, grid-area, position: absolute. Tous déplacent la boîte sans déplacer le nœud. Le focus, lui, ne suit que le nœud : il traverse alors l’écran à contresens.
  • Un état donné par la seule couleur du badge. Sans les styles, il ne reste qu’un mot noir sur blanc — ce qui est acceptable si le mot dit l’état, et ne l’est plus si l’information tenait dans le rouge. Ce défaut-là ne se juge pas au 10.10, qui ne porte que la forme, la taille et la position : il relève du critère 3.1, dont le test 3.1.4 vise « chaque propriété CSS déterminant une couleur et véhiculant une information ».

Le code, pas à pas

1. Le contrôle, qui prend dix secondes

Firefox le fait nativement : Affichage ▸ Style de la page ▸ Aucun style. La page reste chargée, seule la mise en forme disparaît.

Ailleurs, un signet suffit :

document.querySelectorAll('style, link[rel="stylesheet"]').forEach((n) => n.remove());

Il ne retire pas les attributs style en ligne — ajoutez-les si votre page en pose. Ce que vous cherchez tient en deux questions, qui reformulent celles du référentiel : tout le contenu porteur d’information est-il encore là, et se lit-il encore dans un ordre qui a du sens ?

Le glossaire du RGAA appelle « compréhensible » un contenu qui est « lisible (l’ordre des éléments est logique) et cohérent (l’enchaînement de la lecture est cohérent) ». C’est le seul barème de la seconde question.

2. Ce qui doit rester présent

Le contenu porteur de sens vit dans le balisage, jamais dans la feuille de styles.

<p class="badge"><span class="etiquette">Statut :</span> Non conforme</p>
/* Le mot est dans la page ; le CSS ne fait que le mettre en forme */
.etiquette {
	color: var(--gris);
	font-weight: 400;
}

Le glossaire est explicite sur le cas de l’image de fond : « une image porteuse d’information en propriété de fond CSS invalide ce test car l’information n’est plus présente lorsque CSS est désactivé » — et il ajoute que la pratique reste « formellement déconseillée » même accompagnée d’un texte caché (« contenu visible » au glossaire).

Il reste un emploi légitime de content : le décor. Un chevron, un tiret de séparation, une puce dessinée — rien qui manque à personne quand il disparaît.

3. Ce qui doit rester compréhensible

Écrivez le DOM dans l’ordre où le contenu se lit, puis laissez le CSS placer sans ordonner.

<article class="resultat">
	<h3>Critère 1.1 — Images porteuses d’information</h3>
	<p class="badge"><span class="etiquette">Statut :</span> Non conforme</p>
</article>

L’ordre voulu est maintenant celui du code, et order n’a plus rien à faire là. La spécification de Flexbox dit la même chose de sa propre propriété : elle est destinée au réordonnancement visuel, pas logique — les technologies d’assistance et la tabulation continuent de suivre la source.

C’est la même règle pour Grid : un grid-area qui remonte un bloc en haut de la grille ne remonte que sa boîte. Si le résultat vous plaît, c’est que le code aurait dû l’écrire dans cet ordre.

4. La tabulation, qui rend le défaut visible

Le défaut d’ordre est difficile à voir en lisant, et facile à voir en tabulant : si le focus recule sur l’écran, l’ordre visuel et l’ordre du code ont divergé. C’est ce que vérifie le critère 12.8, et c’est le seul symptôme de ce genre de faute qui se constate sans outil.

Une page peut donc être parfaitement lisible à la souris et incohérente au clavier. L’inverse n’existe pas.

5. Ce que la mise en forme dit toute seule

Reste ce qui n’est ni un texte ni un ordre : un onglet mis en avant-plan, un marqueur de page active dans un menu, une taille de police dans un nuage de mots. Le glossaire les rassemble sous « indication donnée par la forme, la taille ou la position ».

Le critère 10.9 demande qu’une autre indication existe ; le 10.10 demande qu’elle soit pertinente, c’est-à-dire réellement restituée et compréhensible. « Les champs suivis d’un astérisque sont obligatoires » ne vaut que si l’astérisque est dans le code, à côté de l’étiquette, et pas dessiné par le CSS.

La couleur n’est pas dans cette liste, et le glossaire n’y range que le marqueur visuel, l’avant-plan et la taille de police. Une information qui ne tient qu’à elle se juge au critère 3.1 : un badge dont seul le rouge dit « non conforme » en est le cas type, et le test 3.1.4 vise nommément la propriété CSS qui porte cette couleur.

6. Et si l’ordre ne peut pas coïncider ?

Il arrive qu’une maquette impose un ordre visuel que le contenu ne justifie pas — une colonne de rappels placée en tête d’écran mais qui se lit en dernier. Deux sorties honnêtes existent : changer le code pour qu’il dise cet ordre, ou changer la maquette. Il n’y en a pas de troisième, et order n’en est pas une : il déplace ce que l’œil voit sans déplacer ce que tout le reste lit.

Au clavier

Ce n’est pas un composant interactif : il n’y a aucun motif clavier à implémenter. Les touches ci-dessous ne servent pas à s’en servir, elles servent à le contrôler.

ToucheEffet
TabSuit l’ordre du code, jamais celui de l’écran. Un focus qui recule signale un order, un row-reverse ou un grid-area.
Ctrl + FCherche dans le texte du document. Un texte injecté par content ne s’y trouve pas.
Ctrl + A puis Ctrl + CSélectionne et copie. Le contenu généré par CSS n’est pas sélectionnable : ce qui manque au collage manquait au code.
Flèches en mode navigationUn lecteur d’écran parcourt la page dans l’ordre du code — celui que la démo fait apparaître quand on retire ses styles au code fautif.

Ce que le lecteur d’écran restitue

Sur la carte fautive, dans l’ordre : « Statut : Non conforme », puis « Critère 1.1 — Images porteuses d’information, titre de niveau 3 », puis « Critère précédent, bouton ». L’état est annoncé avant ce qu’il qualifie, alors qu’il s’affiche après. La formulation varie d’un lecteur à l’autre ; cet ordre, non.

Si l’ordre entendu ne correspond pas à l’ordre vu, la mise en forme a déplacé des boîtes sans déplacer le contenu, et c’est le code qu’il faut réécrire.

Un piège attend ici : le lecteur d’écran n’est pas le contrôle du critère 10.2. Les navigateurs actuels exposent le contenu généré par ::before et ::after dans l’arbre d’accessibilité, et il est donc souvent annoncé — « Statut » compris. Le critère, lui, se vérifie styles désactivés, et ce texte échappe par ailleurs à la sélection, à la recherche dans la page et à la traduction automatique.

Checklist

  • Désactiver les styles avant de livrer une page ; le contrôle prend dix secondes.
  • Aucun texte porteur de sens dans le content d’un ::before ou d’un ::after.
  • Aucune information portée par une image de fond CSS seule.
  • Écrire le DOM dans l’ordre où le contenu se lit, et laisser le CSS placer.
  • Vérifier à la tabulation que le focus ne recule jamais sur l’écran.
  • Doubler d’un texte présent dans le code toute information donnée par la forme, la taille ou la position.
  • Doubler de même toute information donnée par la couleur, que le critère 3.1 traite à part.

Les critères RGAA en jeu

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources