Dans 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 ?
Un utilisateur qui agrandit sa page à 400 % perd le contexte spatial de la mise en page. Un utilisateur de lecteur d’écran ne perçoit pas les variations de taille ni le positionnement des éléments. Pour ces deux profils, une instruction comme « cliquez sur le bouton arrondi » ou un formulaire dont les champs obligatoires sont uniquement en gras représente une information inaccessible : la forme disparaît avec le contexte visuel.
Ce critère s’applique à quatre types de contenu : les textes, les images, les médias temporels (vidéo, audio) et les médias non temporels (schémas, infographies). Dans chacun de ces cas, si une information est transmise par la forme d’un élément, par sa taille relative ou par sa position dans la page, elle doit aussi être disponible par un autre moyen : un texte explicite, un attribut aria-required, une légende ou une description longue.
Le test de principe : désactivez les CSS et relisez le document. Si une information disparaît avec la mise en forme, c’est un échec. Ce critère ne porte pas sur la couleur, couverte par d’autres critères du RGAA, mais uniquement sur la forme géométrique, la taille et la position spatiale.
4 tests pour détecter si l'information repose uniquement sur la forme ou la position
Alternative textuelle à l'information par forme (texte)
- Repérez les textes dont l’information repose sur la forme, la taille ou la position : mention obligatoire indiquée uniquement par le gras, avertissement signalé par une police plus petite, section décrite comme « le bloc à droite ».
- Pour chaque cas, vérifiez qu’une alternative textuelle ou programmatique transmet la même information sans recourir à la présentation visuelle (libellé « (obligatoire) », attribut
aria-required="true", nom explicite de la section). - Si chaque information est accessible par un autre moyen que la présentation visuelle, le test est validé.
Alternative textuelle à l'information par forme (image)
- Repérez les images dont l’information dépend de la forme (icône triangulaire pour une alerte), de la taille (élément plus grand pour indiquer une priorité) ou de la position (flèche indiquant une direction sans libellé textuel).
- Pour chaque image, vérifiez que l’attribut
alt, unaria-labelou une légende transmet l’information de façon autonome, sans référence à la caractéristique visuelle. - Si c’est le cas pour toutes les images concernées, le test est validé.
Alternative à l'information par forme (média temporel)
- Repérez les médias temporels (vidéos, contenus audio avec support visuel) qui transmettent des informations par la forme, la taille ou la position d’un élément : « appuyez sur le grand bouton », « sélectionnez l’icône ronde en bas ».
- Vérifiez qu’une alternative (transcription, audiodescription, sous-titres enrichis) retranscrit cette information sans dépendre de la présentation visuelle.
- Si c’est le cas pour chaque média temporel, le test est validé.
Alternative à l'information par forme (média non temporel)
- Repérez les médias non temporels (graphiques, schémas, infographies statiques) dont l’information repose sur la forme (type de courbe), la taille (hauteur des barres d’un histogramme) ou la position (légende associée à un élément par proximité visuelle).
- Vérifiez que l’attribut
altou une description longue (viaaria-describedbyou un lien vers une page dédiée) retranscrit les données sans s’appuyer sur la représentation visuelle. - Si c’est le cas pour chaque média non temporel, le test est validé.
Exemples
❌ Non conforme : Champs obligatoires signalés uniquement par le gras
<form>
<!-- CSS appliqué : .required { font-weight: bold; } -->
<!-- Aucune légende n'explique ce que le gras signifie -->
<label class="required"><strong>Nom de famille</strong></label>
<input type="text" name="lastname">
<label class="required"><strong>Prénom</strong></label>
<input type="text" name="firstname">
<label>Nom d'usage</label>
<input type="text" name="usage">
<button type="submit">Envoyer</button>
</form>L’information « champ obligatoire » est transmise uniquement par la mise en forme visuelle (le gras). Un utilisateur de lecteur d’écran ou dont le CSS est désactivé ne peut pas distinguer les champs obligatoires des champs facultatifs. Le test 10.9.1 échoue.
✅ Conforme : Champs obligatoires avec astérisque, légende textuelle et aria-required
<form>
<p>Les champs marqués d'un <abbr title="obligatoire">*</abbr> sont obligatoires.</p>
<label for="lastname">Nom de famille <abbr title="obligatoire" aria-label="(obligatoire)">*</abbr></label>
<input type="text" id="lastname" name="lastname" aria-required="true">
<label for="firstname">Prénom <abbr title="obligatoire" aria-label="(obligatoire)">*</abbr></label>
<input type="text" id="firstname" name="firstname" aria-required="true">
<label for="usage">Nom d'usage</label>
<input type="text" id="usage" name="usage">
<button type="submit">Envoyer</button>
</form>L’astérisque est accompagné d’une légende textuelle et d’un aria-label lisible par les lecteurs d’écran. L’attribut aria-required="true" transmet le caractère obligatoire de façon programmatique, indépendamment de toute présentation visuelle. L’information est disponible par trois vecteurs : la mise en forme, le texte et le DOM.
❌ Non conforme : Instruction de navigation référençant uniquement la position
<p>Pour accéder à la liste des cours, utilisez les liens dans la colonne à droite.</p>
<nav aria-label="Cours disponibles">
<ul>
<li><a href="/cours/html">HTML fondamental</a></li>
<li><a href="/cours/css">CSS avancé</a></li>
</ul>
</nav>L’instruction « colonne à droite » suppose que l’utilisateur perçoit la mise en page dans sa globalité. Sur mobile, avec un lecteur d’écran ou avec une feuille de style personnalisée, la notion de « droite » perd tout sens. C’est un échec du test 10.9.1.
✅ Conforme : Instruction de navigation référençant le titre de la section
<p>Pour accéder à la liste des cours, consultez la section « Cours disponibles » ci-dessous.</p>
<nav aria-label="Cours disponibles">
<h2>Cours disponibles</h2>
<ul>
<li><a href="/cours/html">HTML fondamental</a></li>
<li><a href="/cours/css">CSS avancé</a></li>
</ul>
</nav>L’instruction référence le titre de la section, repère textuel stable indépendant de toute mise en page. Cette approche correspond à la technique G96 des WCAG : combiner une indication de localisation textuelle et non sensorielle. La compréhension ne dépend ni de la vue ni du contexte spatial.
Astuces et pièges
⚠️ L’astérisque sans légende échoue systématiquement
C’est l’erreur la plus fréquente rencontrée en audit de formulaires. Beaucoup d’interfaces utilisent l’astérisque (*) pour signaler les champs obligatoires sans expliquer sa signification dans la page. Sans légende textuelle du type « Les champs marqués * sont obligatoires », l’astérisque reste un symbole visuel sans alternative : le test 10.9.1 échoue.
⚠️ Les graphiques : alt="Graphique" ne suffit pas
Un camembert ou un histogramme transmet des proportions par la taille et la position de ses éléments. Si l’attribut alt dit seulement « Répartition des ventes », les données numériques restent inaccessibles. L’alternative doit retranscrire les valeurs : « Répartition des ventes : France 45 %, Allemagne 30 %, autres 25 % ». C’est le point le plus sous-estimé du test 10.9.4.
💡 Désactivez les CSS pour tester en 30 secondes
L’extension Web Developer (Firefox, Chrome) permet de désactiver toutes les feuilles de style en un clic. Parcourez ensuite le document : si des informations d’état, de hiérarchie ou de navigation disparaissent avec la mise en forme, c’est un signal d’alerte direct pour le critère 10.9.
⚠️ La couleur ne relève pas du critère 10.9
Le critère 10.9 couvre la forme géométrique, la taille et la position. Si l’information est transmise uniquement par la couleur (champ rouge pour une erreur, badge vert pour un succès), d’autres critères du RGAA s’appliquent. Les deux problèmes peuvent coexister sur le même élément, mais ils font l’objet d’évaluations distinctes.
⚠️ Les pages d’aide et tutoriels sont aussi en scope
Les guides qui expliquent comment utiliser l’interface sont soumis au test 10.9.1. Une instruction comme « cliquez sur l’icône en forme de crayon pour modifier » échoue si l’icône ne porte pas de libellé accessible décrivant l’action (« Modifier ») et non sa forme. La description doit citer le libellé du contrôle, pas sa silhouette visuelle.
Questions fréquentes
Comment tester manuellement le critère RGAA 10.9 sans outil spécialisé ?
Deux approches complémentaires. D’abord, désactivez les CSS et lisez le document : les informations doivent rester compréhensibles. Ensuite, recherchez dans les textes les termes « gauche », « droite », « rond », « carré », « grand », « petit » : chaque occurrence est une instruction sensorielle à vérifier. Pour les images et médias, contrôlez que les alternatives décrivent les données, pas seulement le type de contenu.
Dans quels cas l'astérisque * satisfait-il le critère RGAA 10.9 pour les champs obligatoires ?
Oui, sous deux conditions cumulatives : une légende textuelle dans le formulaire explique le symbole (« Les champs marqués * sont obligatoires »), et les champs portent aria-required="true" ou l’attribut HTML required. L’astérisque seul, sans légende, est un échec du test 10.9.1. Avec légende mais sans aria-required, le critère 10.9 est satisfait, mais d’autres critères relatifs aux formulaires peuvent rester en cause.
Quelle différence y a-t-il entre le critère RGAA 10.9 et le critère 10.10 ?
Le critère 10.9 vérifie qu’une alternative existe : l’information est-elle accessible par un autre moyen que la forme, la taille ou la position ? Le critère 10.10 vérifie que cette alternative est pertinente : transmet-elle réellement l’information de façon complète ? Un graphique avec alt="Graphique des ventes" peut théoriquement satisfaire 10.9 si les données chiffrées sont disponibles ailleurs dans la page, mais il échoue en 10.10 car l’alternative est trop vague pour être utile.
Comment le critère RGAA 10.9 s'applique-t-il aux icônes sans texte visible ?
Oui, si elle transmet une information. Une icône triangulaire indiquant une alerte doit avoir un alt ou aria-label qui décrit l’alerte (« Attention : délai dépassé »), pas la forme (« triangle »). Écrire alt="triangle d’alerte" échoue au test 10.9.2 : la forme est décrite, mais l’information réelle ne l’est pas.
Comment le critère RGAA 10.9 s'applique-t-il aux documents PDF joints à une page ?
Oui. Tout document accessible depuis une page web entre dans le périmètre du RGAA, y compris les PDF. Un guide utilisateur en PDF qui dit « cliquez sur le bouton carré » sans citer le libellé du bouton constitue un échec du critère dans ce document. En pratique, les PDF sont audités séparément, mais les mêmes règles s’y appliquent.