Les descriptions ajoutées aux émoticônes et symboles expriment-elles leur signification dans le contexte — pas seulement leur forme visuelle ?
Critère officiel 13.6 — Dans chaque page web, pour chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ?
Pourquoi c'est important
Une alternative comme « smiley » ou « coche verte » ne transmet pas le sens opérationnel. Une personne aveugle comprend qu'il y a un symbole graphique, mais pas ce qu'il signifie dans le contexte précis de la phrase.
Exemples concrets
Ce qui est conforme
L'émoticône ✅ dans la liste des démarches disponibles en ligne est accompagnée de l'alternative « (disponible en ligne) ». L'utilisateur comprend le sens opérationnel directement, sans passer par la description visuelle.
Ce qui pose problème
La même coche verte a pour alternative « coche verte ». L'utilisateur sait qu'il y a un symbole de validation visuelle, mais pas ce qu'il valide dans ce contexte précis.
Comment agir
Pour chaque symbole porteur d'information, posez-vous la question : quelle est la signification dans ce contexte précis ? Utilisez cette signification comme alternative — pas la description visuelle. « Disponible », « Obligatoire », « Nouveau », « Fermé » — pas « étoile rouge », « point d'exclamation », « étoile jaune ».
Règles clés
- L'alternative décrit ce que le contenu représente, pas ce qu'il est.
- Pour un art ASCII d'une flèche droite : aria-label='Flèche vers la droite' ou 'Continuer'.
- Pour un graphique ASCII : décrire les données.
Erreurs fréquentes
- aria-label générique sur un art ASCII ('dessin') sans décrire ce qu'il représente
- Alternative décrivant le type ('art ASCII') sans son contenu
Exemples de code
alternative non pertinente
✗ Non conforme<pre role="img" aria-label="art ASCII">
*--->
</pre>'art ASCII' décrit le type de contenu, pas ce qu'il représente.
alternative pertinente
✓ Conforme<pre role="img" aria-label="Flèche vers la droite">
*--->
</pre>Décrit ce que représente l'art ASCII — compréhensible hors contexte visuel.
Référence WCAG : 1.1.1