Nouveau E-learning

Images

Une image est un élément visuel intégré à une diapositive pour illustrer, expliquer ou simplement décorer un contenu. Selon qu’elle porte ou non de l’information, elle doit recevoir une alternative textuelle, une description détaillée, ou être masquée aux technologies d’assistance.

Sur cette page

Trois catégories d’images sont à distinguer :

  • Images décoratives : n’apportent aucune valeur informationnelle ; leur suppression ne génère aucune perte de contenu. Elles servent uniquement à l’esthétique ou à l’ambiance visuelle.
  • Images informatives : porteuses d’un contenu essentiel à la compréhension ; leur absence entraîne une perte d’information pour l’apprenant.
  • Images complexes : condensent une grande quantité d’information sous forme graphique (schémas, infographies, graphiques de données) et nécessitent une description étendue pour être pleinement accessibles.

Quand utiliser une image

  1. Illustrer ou clarifier : quand un visuel aide réellement à comprendre une notion (schéma, photo de situation, capture d'écran d'un logiciel).
  2. Alléger le texte : pour remplacer un long paragraphe descriptif par un visuel doté d'une alternative textuelle.
  3. Ancrer la mémorisation : pour créer un repère visuel récurrent d'une section à l'autre du module.

Quand ne pas utiliser une image

  1. Texte en image : ne jamais intégrer un texte informatif ou une consigne dans un fichier image ; utiliser une zone de texte Storyline.
  2. Décoration superflue : éviter d'empiler des visuels sans valeur pédagogique, qui alourdissent la diapositive et l'ordre de lecture.
  3. Information portée par la seule couleur ou la seule position dans l'image : privilégier une liste ou un tableau structuré.

Sur cette page

Images décoratives

Ces images doivent être masquées aux technologies d'assistance afin qu'elles ne génèrent aucune interruption lors de la restitution du contenu. Elles n'apportant aucune valeur pédagogique, leur neutralisation améliore la fluidité de navigation pour tous les utilisateurs, quels que soient leur contexte ou leurs besoins. Il faut donc décocher la case "l'objet est visible par les outils d'accessibilité" dans la modale contenant les options d'accessibilité.

Images informatives

Une alternative textuelle courte et équivalente est obligatoire (recommandation : 150 caractères maximum). Elle doit restituer fidèlement l'information véhiculée par l'image — et non la décrire littéralement — afin de garantir une expérience d'apprentissage équivalente, que l'apprenant utilise un lecteur d'écran, une navigation vocale ou accède au contenu dans un environnement dégradé. Il faut donc renseigner l'alternative textuelle de l'image dans le champ "texte alternatif" présent dans la modale d'accessibilité.

Images complexes

Dès lors qu'un visuel condense un volume important d'information (graphique, schéma, infographie), une description structurée et exhaustive est requise. Elle peut prendre la forme d'un texte adjacent, d'une section dédiée dans le module ou d'un lien vers une version textuelle complète. Ce niveau de description bénéficie également à l'indexation du contenu et à sa réutilisabilité dans d'autres formats.

Sur cette page

Interaction au clavier

Les images ne sont pas des éléments interactifs : elles ne reçoivent pas le focus et ne s’atteignent donc pas à la touche TAB.

Accordion keyboard navigation function table
Touche Fonction
Tab Atteindre le lien ou le bouton donnant accès à la description détaillée d’une image complexe, ou l’image lorsqu’elle est cliquable.
Espace/Entrée Activer le lien, le bouton ou l’image cliquable.