Dans 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 ?
Un utilisateur de lecteur d’écran entend « appuyez sur le bouton triangulaire pour sauvegarder ». Il ne voit pas les boutons. Cette instruction est inutilisable. Ce critère ne vérifie pas seulement qu’une alternative existe (c’est le rôle du critère 10.9) : il exige que cette alternative soit pertinente, c’est-à-dire qu’elle transmette réellement l’information dans tous les contextes de consultation et pour tous les utilisateurs.
Une alternative pertinente nomme la cible par son libellé textuel ou son rôle fonctionnel. « Cliquez sur le bouton vert en haut à droite » cumule trois défauts : couleur, position, taille relative. Aucun de ces indices n’est restitué par un lecteur d’écran. La formulation pertinente : « cliquez sur le bouton Valider ».
Pour les images et médias, l’alternative doit exprimer l’information elle-même, pas le dispositif visuel qui la porte. Si des flèches de tailles différentes indiquent des niveaux de priorité, l’alt pertinent liste ces niveaux en clair. Il ne dit pas « schéma avec flèches de tailles variées ». L’alternative doit remplacer, pas décrire.
4 tests pour confirmer qu'un moyen autre que la forme permet l'identification
Pertinence de l'alternative forme / taille (texte)
- Repérez dans la page tout texte dont le sens dépend uniquement de la forme (gras, italique, souligné utilisés comme seul signal sémantique), de la taille ou de la position.
- Pour chaque cas, vérifiez que l’alternative proposée transmet la même information sans recours à ces indices visuels. Exemple : « les champs en rouge sont obligatoires » est non pertinent si aucun autre indicateur ne signale l’obligation. « Les champs obligatoires sont marqués d’un astérisque (*) » est pertinent.
- Testez dans plusieurs contextes : lecteur d’écran, zoom 400 %, mode contraste élevé.
- Si chaque alternative est pertinente pour tous les utilisateurs, le test est validé.
Pertinence de l'alternative forme / taille (image)
- Identifiez les images dont le contenu informatif repose sur la forme, la taille ou la position d’éléments visuels (icônes de formes différentes indiquant un statut, barres de graphique indiquant des valeurs, flèches directionnelles…).
- Pour chaque image, vérifiez que l’alternative (attribut
alt,aria-label, ou description longue) exprime l’information réelle portée par ces formes, tailles ou positions. L’alternative ne doit pas se contenter de décrire le dispositif visuel. - Si chaque alternative est pertinente dans tous les contextes de consultation, le test est validé.
Pertinence de l'alternative forme / taille (média temporel)
- Identifiez les médias temporels (vidéos, animations) dont une information est transmise uniquement par la forme, la taille ou la position d’éléments à l’écran (ex. : une icône qui change de forme pour indiquer un état, un curseur positionné à gauche ou à droite pour représenter un choix).
- Vérifiez que la transcription, les sous-titres ou l’audiodescription associés reprennent cette information de façon pertinente, en nommant explicitement l’information plutôt qu’en décrivant le dispositif visuel.
- Si chaque alternative est pertinente, le test est validé.
Pertinence de l'alternative forme / taille (média non temporel)
- Identifiez les médias non temporels (SVG interactifs, cartes, infographies, schémas vectoriels) dont des informations sont transmises par la forme, la taille ou la position de leurs composants.
- Vérifiez que chaque alternative textuelle (via
alt,aria-label, description longue, ou légende associée) exprime l’information elle-même, indépendamment de la représentation visuelle. Une légende qui indique « les barres plus hautes correspondent aux valeurs plus élevées » n’est pas pertinente ; une légende qui liste les valeurs numériques l’est. - Si chaque alternative est pertinente dans tous les contextes, le test est validé.
Exemples
❌ Non conforme : Instruction de navigation référençant uniquement la forme et la position
<p>Pour soumettre votre dossier, appuyez sur le gros bouton rond en bas à droite de la page.</p>
<button type="submit" style="border-radius: 50%; width: 80px; height: 80px;">✓</button>L’instruction ne cite que la taille (« gros »), la forme (« rond ») et la position (« en bas à droite »). Un utilisateur de lecteur d’écran naviguant par tabulation n’a accès à aucun de ces indices. Le bouton lui-même ne porte aucun libellé textuel accessible, ce qui constitue un double échec.
✅ Conforme : Instruction de navigation avec alternative pertinente
<p>Pour soumettre votre dossier, cliquez sur le bouton « Envoyer mon dossier » en bas de page.</p>
<button type="submit">Envoyer mon dossier</button>L’instruction référence le bouton par son libellé textuel exact. Un utilisateur de lecteur d’écran peut localiser ce bouton par son nom lors de la navigation par éléments de formulaire. La concordance entre l’instruction et le libellé du bouton garantit une alternative pertinente dans tous les contextes.
❌ Non conforme : Alt d’image décrivant la forme plutôt que l’information
<img src="schema-priorites.png" alt="Schéma avec des flèches de différentes tailles">L’alt décrit le dispositif visuel (des flèches, des tailles différentes) mais pas l’information qu’il véhicule. Un utilisateur de lecteur d’écran sait qu’il y a des flèches de tailles différentes, mais ignore ce que ces tailles signifient. Le critère 10.10 est en échec même si 10.9 est satisfait (une alternative existe bien).
✅ Conforme : Alt d’image exprimant l’information portée par les formes
<img src="schema-priorites.png" alt="Niveaux de priorité : Critique (5 éléments), Haute (12 éléments), Standard (28 éléments). Les niveaux sont représentés par des flèches de tailles croissantes.">L’alt commence par l’information réelle (les valeurs et leur classement), puis peut mentionner la représentation visuelle en complément. Un utilisateur sans vision dispose des mêmes données que celui qui voit le schéma. L’ordre des informations compte : l’essentiel d’abord.
Astuces et pièges
⚠️ Confondre présence et pertinence d’une alternative
Le critère 10.9 demande si une alternative existe. Le critère 10.10 demande si elle est pertinente. Un aria-label="icône de statut" satisfait 10.9 (un libellé existe) mais échoue à 10.10 (il décrit la forme, pas l’information transmise). C’est l’erreur la plus fréquente en audit sur ce critère.
⚠️ Les légendes de graphiques qui décrivent la taille
Dans un graphique en secteurs, une légende textuelle comme « la part verte est plus grande » perpétue la dépendance à la couleur et à la taille. La légende pertinente dit « Catégorie A : 62 % ». La valeur numérique est l’information ; la taille du secteur n’en est que la représentation visuelle.
💡 Tester sans les CSS pour détecter les échecs rapidement
Désactivez les styles CSS de la page (extension Web Developer ou devtools). Si une information disparaît ou devient incompréhensible (ex. : un champ « obligatoire » signalé uniquement par une bordure rouge), l’alternative n’est pas pertinente. Ce test détecte la majorité des échecs sur 10.10.1 en quelques secondes.
⚠️ Les instructions dans les documents embarqués
Un PDF intégré via <iframe> ou <embed> peut contenir des instructions du type « voir le tableau en haut de la page 3 ». Le critère 10.10.4 (média non temporel) s’applique. La pertinence de l’alternative doit être évaluée dans le contexte du document embarqué, pas seulement de la page HTML encadrante.
⚠️ Les indications spatiales qui constituent l’information elle-même
Une carte qui indique « la station est à 200 m au nord du musée » utilise la position comme information, mais l’alternative textuelle « à 200 m au nord » est pertinente car elle exprime la relation spatiale en texte. Le critère n’interdit pas de mentionner une position ; il interdit que la position visuelle soit le seul vecteur d’information sans équivalent textuel accessible.
Questions fréquentes
Quelle est la différence concrète entre le critère RGAA 10.9 et 10.10 ?
Le critère 10.9 vérifie qu’un moyen alternatif de récupérer l’information existe (présence). Le critère 10.10 vérifie que ce moyen est pertinent (qualité). Un bouton avec aria-label="bouton triangulaire" satisfait 10.9 mais échoue à 10.10 : le libellé décrit la forme, pas la fonction. Les deux critères sont évalués indépendamment.
Comment évaluer la pertinence d'une alternative visuelle lors d'un audit RGAA ?
Posez-vous cette question : si quelqu’un vous lit l’alternative à voix haute sans vous montrer le contenu visuel, comprenez-vous l’information ? Si non, l’alternative n’est pas pertinente. Pour les instructions textuelles, remplacez mentalement la référence visuelle par « [CENSURÉ] » et vérifiez si la phrase reste actionnable.
Pourquoi un alt décrivant d'abord la structure visuelle avant l'information est-il valide en RGAA ?
Oui, à condition que l’information soit complète et accessible dès le début de l’alt. « Graphique en barres : ventes 2024 par trimestre — T1 : 120k, T2 : 135k, T3 : 148k, T4 : 162k » est pertinent. La mention du type de graphique est accessoire ; les valeurs numériques sont l’essentiel.
Pourquoi les icônes sans texte visible dans une interface sont-elles concernées par RGAA 10.10 ?
Oui, dès qu’elles portent une information. Un bouton contenant uniquement une icône « triangle vers la droite » pour la lecture doit avoir aria-label="Lecture". La pertinence s’évalue sur la fonction communiquée ; la forme représentée n’est que son vecteur visuel. Le critère 10.10.1 s’applique aux icônes SVG inline ou texte, 10.10.2 aux icônes en <img>.
Comment RGAA 10.10 s'applique-t-il aux tableaux où la position des cellules porte l'information ?
Un tableau HTML bien structuré avec <th>, scope ou headers restitue la position des cellules programmatiquement aux lecteurs d’écran. La position n’est pas « uniquement visuelle » dans ce cas. En revanche, un tableau simulé avec des <div> positionnés en CSS sans sémantique HTML associe tombe sous le coup du critère 10.10.1.