Table des matières
A
Durée : 6 minutes
Quelle est ta stratégie face aux alternatives textuelles ?
Images, icônes, vidéos… Chaque choix compte pour rendre un contenu accessible. Découvre ton profil en répondant à quelques situations concrètes.
Principe
Pour rendre un module accessible à tous, il est indispensable de fournir une alternative textuelle pour chaque image, vidéo, audio ou élément visuel important.
L’objectif est de permettre à chacun d’accéder à l’information, même sans voir ou entendre le média.
Explication audio (transcription disponible)
Transcription
Proposer une alternative textuelle, c’est rendre chaque image, vidéo ou audio accessible à tous.
Quand une personne ne peut pas voir une illustration, il faut qu’elle puisse en comprendre le contenu grâce à une description adaptée. Si le visuel est complexe, une description détaillée placée à part est parfois nécessaire.
Pour les images purement décoratives, laissez l’alternative vide : cela évite de surcharger la navigation pour les utilisateurs de lecteurs d’écran.
C’est une règle essentielle : chaque information transmise par une image, un média ou une icône doit pouvoir être comprise par tous, même sans le visuel.
Enfin, attention à l’usage d’emojis, de pictogrammes ou de caractères spéciaux : ils sont toujours lus par les lecteurs d’écran, et peuvent vite compliquer la navigation s’ils sont trop nombreux ou mal utilisés.
À vérifier
- Vérifier que chaque image, icône ou bouton porteur d’information dispose d’un texte alternatif approprié.
- S’assurer que les images complexes (schémas, graphiques) bénéficient d’une description détaillée, placée à proximité ou dans une ressource externe.
- S’assurer que les éléments purement décoratifs ont une alternative vide (
alt="").
Pour qui ?
- Utilisateurs de lecteurs d’écran (aveugles, malvoyants)
- Utilisateurs en contexte contraint (mauvaise connexion, affichage limité, etc.)
- Toute personne qui ne peut pas accéder à une image, une vidéo ou un audio dans le format proposé
Pourquoi c’est important ?
Sans alternative textuelle, toute information transmise uniquement par un média est perdue pour de nombreux utilisateurs.
C’est essentiel pour l’accessibilité, mais aussi pour la maintenance et la compréhension globale du module.
Comment réussir
- Utilisez toujours la fonction de texte alternatif proposée par l’outil pour décrire les éléments visuels.
- Pour une image simple, fournissez une description brève et pertinente (environ 125 caractères).
- Pour un schéma ou une infographie complexe, rédigez une description longue, à placer en dehors du texte alternatif si nécessaire (par exemple : ouverture d’une popup ou texte intégré naturellement au contenu).
- Pour les médias, ajoutez des sous-titres, une transcription ou un résumé selon le contexte (voir points suivants).
WCAG
A
1.1.1 Contenu non textuel
Rendre accessibles images, médias et pictogrammes
Accessibilité technique : ce que l’auteur renseigne, ce que l’outil automatise
Quand on parle d’alternative textuelle, on pense souvent à la fameuse balise alt en HTML pour décrire une image (balise <img>) ou une icône insérée.
Mais l’accessibilité des contenus non textuels passe aussi par d’autres mécanismes : attributs HTML (alt), propriétés ARIA (aria-label, aria-labelledby…), balises de légende (par exemple, figcaption pour une image ou legend pour un graphique), ou encore transcription/sous-titres selon le média.
Dans la plupart des outils auteurs (LMS, H5P, Storyline, Rise360, Genially, etc.) :
- L’attribut
altest proposé pour chaque image, icône ou bouton. - Les autres alternatives (légende, sous-titres, transcription…) se renseignent dans des champs ou paramètres dédiés.
- Les rôles ARIA sont généralement gérés automatiquement par l’outil. L’utilisateur n’a presque jamais à manipuler le code, sauf pour des modules web personnalisés.
- Si vous personnalisez votre module avec du HTML ou un outil avancé, référez-vous aux bonnes pratiques WAI-ARIA du W3C.
Des alternatives textuelles bien pensées améliorent aussi l’accessibilité cognitive, la compréhension de tous et facilitent la traduction des modules.
En résumé, selon le type de média, l’alternative textuelle prendra différentes formes.
Alternatives textuelles pour les éléments visuels et médias
Voici un récapitulatif des bonnes pratiques pour chaque média :
| Média | Alternative textuelle |
|---|---|
| Image informative | Texte court et pertinent (attribut alt sur balise <img>) |
| Image décorative | Alternative vide (alt= » « ) |
| Image complexe | Texte court + description longue à côté |
| Vidéo | Sous-titres et/ou transcription |
| Audio | Transcription ou résumé |
| Élément interactif (iframe) | Titre clair et légende à proximité |
Icônes, emojis et caractères spéciaux : usages et limites
Dans la conception pédagogique, icônes, emojis et caractères Unicode sont souvent utilisés pour illustrer ou rythmer le contenu.
Emoji et caractères Unicode sont lus à l’oral par les lecteurs d’écran : attention à ne pas en abuser, au risque de surcharger la navigation ou de gêner la compréhension.
Icônes (images)
Une icône est une image ajoutée pour illustrer ou déclencher une action (ex : poubelle pour “supprimer”, flèche, loupe…).
- Toujours ajouter un texte alternatif si l’icône est seule (ex : alt= »Supprimer »).
- Si un texte est lié, laissez l’alternative de l’icône vide (alt= » « ), pour éviter la répétition. Un texte explicite (“Valider”, “Envoyer”…), éventuellement accompagné d’une icône, reste préférable pour les actions importantes.
- Pour une icône interactive, prévoyez aussi un effet visuel (changement de couleur, surbrillance…) au survol pour signaler qu’elle est cliquable. Consultez la fiche « 17. Zone de clic confortable » pour connaitre les dimensions minimales requises.
- Le format le plus léger et net est le SVG (plus ou moins supporté selon l’outil). Les formats PNG et JPEG restent les plus supportés.
Emojis 😊
Ce sont des pictogrammes colorés intégrés dans le texte, principalement utilisés pour illustrer, apporter une émotion ou différencier une partie de contenu.
- Ne jamais utiliser seul pour une action : toujours un texte explicite à côté.
- Évitez d’en mettre partout : trop d’emojis, que ce soit dans le texte, les titres, les menus… cela alourdit la navigation (et l’annonce par un lecteur d’écran devient pénible).
- Exemple : sur un salon Discord, chaque canal de menu commence par un emoji. Pour un utilisateur avec lecteur d’écran, chaque ligne commence par “hashtag”, “flamme”, “pomme”… ce qui nuit à la rapidité d’accès à l’info et peut vite agacer.
- Leur apparence change selon l’appareil, attention au rendu.
Caractères Unicode (✔, ★, ➔, • …)
Ce sont des caractères spéciaux intégrés à la police, souvent utilisés pour ponctuer, rythmer ou compléter visuellement un texte.
- N’utilisez jamais un caractère Unicode seul pour une action importante.
- À insérer dans le texte ou pour illustrer, mais pas pour remplacer les puces de liste automatiques : préférez toujours les vraies listes à puces sémantiques pour structurer votre contenu (les lecteurs d’écran l’annoncent correctement).
- Ils héritent de la couleur/du style du texte et sont plus neutres qu’un emoji.
Emoticons :–)
Ce sont des suites de caractères classiques pour simuler une expression.
Ils ne sont pas du tout interprétés : les lecteurs d’écran les lisent par-exemple “deux-points, tiret, parenthèse”. À éviter en contexte pro ou pédagogique.
À retenir
- Privilégier la clarté et la parcimonie pour tous ces éléments.
- Pour chaque bouton ou image interactive, vérifiez que l’intitulé/texte alternatif décrit bien l’action, et non le visuel (ex : “Fermer” et non “Croix”).
- Préférez un bouton avec une icône et le texte, plutôt qu’une icône seule.
- Un emoji ou un caractère Unicode peut compléter, mais jamais remplacer une information essentielle. Trop d’emojis ou d’icônes nuisent à la lisibilité.
Suivre ma progression :
Ce point est lu & terminé.