Storyline 360 : Comment concevoir un module accessible

Dernière mise à jour de l’article le

Cet article s'applique à :

Vous avez besoin d’un module e-learning qui soit accessible aux apprenants en situation de handicap, mais vous ne savez pas par où commencer ? Vous êtes au bon endroit. Dans cet article, nous abordons des solutions spécifiques pour que vous aidiez les apprenants handicapés à interagir autant que possible avec votre module Storyline 360.

Personnaliser l’expérience de l’apprenant dès le début

Informez les stagiaires en situation de handicap qu’ils forment une partie intégrante de votre public d’entrée de jeu. Fournissez des instructions d’accessibilité au début de votre module afin que les apprenants en situation de handicap soient immédiatement à l’aise avec sa conception et sa présentation.

Par exemple, si vous utilisez un raccourci clavier cohérent tout au long du module pour passer à la diapositive suivante, informez-en les apprenants dès le début afin qu’ils ne soient pas obligés d’utiliser la souris.

Voici une autre idée : Envisagez de demander aux apprenants s’ils ont besoin de format alternatif pour certains contenus en raison de troubles de la vue, de l’audition ou de la mobilité. Enregistrez ensuite leurs réponses dans une variable que vous pouvez utiliser pour les orienter vers des diapositives adaptées à leurs besoins.

Par exemple, si un apprenant se signale comme malvoyant au début d’un module, vous pouvez afficher automatiquement des descriptions détaillées des vidéos, sous forme de texte (pouvant être lu par un lecteur d’écran) en lieu et place des vidéos tout au long du module.

Optimiser votre module pour des apprenants mal-entendants

Ajouter des légendes codées

Importez des sous-titres pour les voix-off et les vidéos. C’est facile à réaliser et payant en termes de résultat. Consultez ce didacticiel vidéo et ce guide de l’utilisateur pour plus d’informations.

Le sous-titrage n’est pas destiné seulement aux apprenants malentendants. Si votre module est réalisé dans une autre langue que la langue maternelle des apprenants, les sous-titres peuvent les aider à bien en comprendre le contenu. Et les apprenants dans un environnement bruyant peuvent également apprécier les sous-titres.

Fournir une transcription

Pensez à ajouter une transcription, soit via le panneau de commentaires du lecteur pour chaque diapositive, soit en tant que pièce jointe téléchargeable pour l’intégralité du module.

Assurez-vous de mentionner dans la transcription écrite des détails importants véhiculés par les images et les vidéos, de sorte que les apprenants disposent de toutes les informations voulues.

Ne pas utiliser de tests chronométrés

Indiquez aux apprenants le temps dont ils ont besoin pour exploiter les supports alternatifs que vous mettez à leur disposition. Évitez les quiz chronométrés.

Optimiser votre module pour des apprenants à mobilité réduite

Ajouter des raccourcis clavier

Les raccourcis clavier peuvent s’avérer d’une grande aide pour les apprenants à mobilité réduite. Ils sont faciles à réaliser dans Storyline avec des déclencheurs.

Par exemple, pensez à ajouter un raccourci clavier pour chaque diapositive qui permet aux apprenants d’accéder à la diapositive suivante lorsqu’ils appuient sur une touche, comme la touche flèche vers la droite. Voici comment se présente l’Assistant de déclencheur dans cet exemple :

  • Action : Aller à la diapositive
  • Diapositive : Diapositive suivante
  • Quand : L’utilisateur appuie sur une touche
  • Touche : Droite
  • Objet : Sélectionnez une diapositive dans la liste déroulante.

Dans certains cas, comme dans l’exemple ci-dessus, vous pouvez gagner du temps en ajoutant le déclencheur de la touche à votre masque de diapositive de plutôt qu’à chaque diapositive de votre module.

Fournir des alternatives aux interactions par zones de clic et par glisser-déposer

Les interactions suivantes par zones de clic et par glisser-déposer nécessitent une souris pour la navigation, ce qui les rend difficiles ou impossibles à utiliser pour les apprenants à mobilité réduite. Si vous les ajoutez à votre module, proposez des solutions alternatives commandées depuis le clavier ou à base de texte.

Interactions de style formulaire :

  • Appariement : glisser-déposer
  • Ordonner : glisser-déposer
  • Classer : glisser-déposer
  • Banque de mots : sélectionner-déplacer
  • Zone de clic

Interactions autour des questions à formulation libre :

  • Glisser-déposer
  • Zone de clic

Voici quelques exemples de solutions alternatives :

  • Plutôt qu’une interaction Appariement : glisser-déposer, préférez une interaction Appariement : menu déroulant, car elle est accessible au moyen du clavier.
  • Vous pouvez ajouter un lien qui ouvre un calque avec du texte de remplacement pour une interaction de type glisser-déposer de format libre.
  • Vous pouvez permettre aux apprenants de choisir une alternative par curseur aux interactions par zones de clic, car les curseurs réagissent aux flèches du clavier.

Ne pas utiliser uniquement les états de survol de la souris pour afficher des informations importantes

Même si les états de survol de la souris (à savoir des effets de substitution nécessitant une souris) sont un bon moyen d’ajouter de l’interactivité, évitez de les utiliser pour afficher des informations importantes. Si vous utilisez les états de survol de la souris pour afficher du texte ou des images, pensez à fournir une alternative accessible par le clavier.

Par exemple, il est judicieux que la couleur d’un bouton change lorsque la souris le survole pour indiquer qu’il s’agit d’un objet cliquable, mais il n’est pas pertinent d’afficher des textes de retour dans l’état de survol de la souris sans également fournir un autre moyen d’accéder à ces informations. Dans cet exemple, une solution alternative consisterait en un raccourci clavier qui déclenche la lecture d’une version audio des retours à l’attention des personnes n’utilisant pas la souris.

Ne pas utiliser de tests chronométrés

Indiquez aux apprenants le temps dont ils ont besoin pour exploiter les supports alternatifs que vous mettez à leur disposition. Évitez les quiz chronométrés.

Optimiser votre module pour des apprenants malvoyants

Les troubles visuels couvrent un large éventail, notamment la malvoyance, la cécité des couleurs et la cécité totale. Certains apprenants peuvent également éprouver des difficultés à lire le texte à l’écran en raison de troubles de l’apprentissage ou parce que la langue du module n’est pas leur langue maternelle.

Heureusement, il existe plusieurs façons de rendre votre module accessible aux apprenants malvoyants, comme indiqué ci-après.

Très souvent, les apprenants malvoyants utilisent des lecteurs d’écran pour suivre des modules e-learning. Il est donc important de noter que Storyline 360 prend en charge les lecteurs d’écran JAWS avec Google Chrome, Firefox et Internet Explorer. Consultez cet article pour en savoir plus sur les versions prises en charge.

Ajouter du texte alternatif pour les lecteurs d’écran

Il est essentiel de prévoir des textes de remplacement à l’attention des apprenants équipés d’un lecteur d’écran. La bonne nouvelle, c’est qu’il est facile d’en ajouter. Consultez ce didacticiel vidéo pour avoir un rapide aperçu et ce guide utilisateur pour en savoir plus.

Il vous suffit d’ajouter du texte de remplacement aux objets des diapositives qui fournissent à l’apprenant du contexte ou du sens. Par exemple, vous pouvez ne pas ajouter de texte de remplacement à un personnage pointant vers une entrée de listes à puces dans la mesure où c’est précisément l’entrée de la liste à puces qui donne de l’information, mais vous devez ajouter du texte de remplacement à un personnage qui fait partie d’un scénario interactif.

Voici quelques conseils visant à écrire des textes de remplacement de qualité (extraits de la page 8 de notre e-book sur l’accessibilité) :

  • Véhiculez le contenu et les informations tels que fournis par l’objet ou l’image.
  • Soyez concis sans omettre d’informations pertinentes.
  • Communiquez uniquement des informations qui ne figurent pas déjà dans le texte à l’écran.
  • Évitez les expressions « image de » et « graphique de » et fournissez simplement les informations dont l’apprenant a besoin.
  • Évitez les abréviations et la ponctuation à outrance. N’utilisez pas de ponctuation telle que ***, qui sera interprétée rébarbativement par les lecteurs d’écran sous la forme « astérisque astérisque astérisque ».

Personnaliser l’ordre des onglets afin de fournir un contexte significatif

L’ordre des onglets est important pour les apprenants équipés d’un lecteur d’écran. Veillez à personnaliser l’ordre des onglets de chaque diapositive de la manière la plus explicite.

Par exemple, vous souhaitez que les apprenants accèdent à un bloc de texte d’instructions avant d’accéder à un champ de saisie de données. Sinon, la confusion les gagnera s’ils arrivent directement au champ de saisie de données sans savoir ce qui leur est demandé.

Et si un objet de la diapositive n’apporte pas de sens aux apprenants, nous vous recommandons de le supprimer de l’ordre des onglets afin d’épargner aux apprenants de devoir naviguer vers des objets sans intérêt et d’écouter la description qu’en donne leur lecteur d’écran.

Par exemple, vous pouvez vouloir inclure une image dans l’ordre des onglets si les apprenants ont besoin des informations qu’elle véhicule pour pouvoir répondre à une question. En revanche, il convient assurément de supprimer une image de l’ordre des onglets s’il s’agit simplement d’un élément d’arrière-plan de la conception.

Voici comment personnaliser l’ordre des onglets pour les objets des diapositives.

Utilisez des tableaux afin de structurer un texte pour des lecteurs d’écran

Les tableaux sont utiles pour l’accessibilité, communiquant aux lecteurs d’écran la façon dont le contenu est organisé et fournissant un contexte pour les apprenants. Consultez ce didacticiel vidéo et ce guide de l’utilisateur pour tout savoir de l’utilisation des tableaux dans Storyline.

N’oubliez pas d’ajouter des textes alternatifs et un ordre d’onglets significatif aux tableaux et aux cellules.

Identifier la langue du module pour les lecteurs d’écran

Cette opération est très facile. Indiquez aux lecteurs d’écran la langue qu’utilise votre module. Sélectionnez simplement la langue dans les propriétés du lecteur.

  1. Accédez à l’onglet Accueil du ruban Storyline, puis cliquez sur Lecteur.
  2. Lorsque la fenêtre des propriétés du lecteur s’ouvre, cliquez sur Étiquettes de texte dans le ruban.
  3. Sélectionnez une langue dans la liste déroulante Langue.
  4. Cliquez sur OK.

Personnaliser les étiquettes de texte

Les lecteurs d’écran utilisent les étiquettes de texte pour décrire les éléments du lecteur et donner des instructions aux apprenants. Parfois, vous pouvez vouloir modifier les étiquettes de texte par défaut. Par exemple :

  1. Accédez à l’onglet Accueil du ruban Storyline, puis cliquez sur Lecteur.
  2. Lorsque la fenêtre des propriétés du lecteur s’ouvre, cliquez sur Étiquettes de texte dans le ruban.
  3. Faites défiler vers le bas la liste des étiquettes de texte jusqu’à ce que vous voyiez Instructions du lecteur d’écran : ignorer la navigation. (Les étiquettes de texte sont par classées par ordre alphabétique).
  4. Dans le champ texte personnalisé, tapez de nouvelles instructions, comme : Pour ignorer la navigation et revenir à la diapositive, appuyez sur entrée ou sur la barre d’espace. Pour accéder aux options de navigation, appuyez sur l’onglet.
  5. Cliquez sur OK.

Consultez ce guide pour en savoir plus sur l’utilisation des étiquettes.

Permettre aux apprenants d’ignorer des éléments de navigation répétitifs du lecteur

Bonne nouvelle ! Cette fonctionnalité est toujours activée dans Storyline 360, aussi n’avez-vous rien à faire pour qu’elle fonctionne.

Lorsque les apprenants équipés d’un lecteur d’écran accèdent au dernier objet d’une diapositive, Storyline les invite à appuyer sur la touche Entrée pour ignorer les éléments de navigation du lecteur, tels que les boutons Précédent/Suivant ou les onglets de la barre latérale et revenir au premier objet de la diapositive. Plus de détails ici.

Augmenter la taille des polices du lecteur

En tant que concepteur du module, vous disposez d’un contrôle complet sur la taille du texte des diapositives, mais qu’en est-il des éléments du lecteur, comme les boutons, les onglets de la barre latérale et les messages contextuels ? Vous pouvez augmenter la taille des polices jusqu’à 200 % dans les paramètres du lecteur.

  1. Accédez à l’onglet Accueil du ruban Storyline, puis cliquez sur Lecteur.
  2. Lorsque la fenêtre des propriétés du lecteur s’affiche, cliquez sur Couleurs et effets dans le ruban.
  3. Saisissez un pourcentage dans le champ Taille de la police du lecteur.
  4. Cliquez sur OK.

Fournir des textes de remplacement pour les animations

Si vous utilisez des animations afin de véhiculer un contexte important, proposez des textes de remplacement à l’attention des apprenants malvoyants.

Par exemple, ajoutez un lien facultatif vers une diapositive animée qui ouvre un calque de texte statique comportant les mêmes informations à l’attention des apprenants utilisant un lecteur d’écran.

Ne pas utiliser uniquement les états de survol de la souris pour afficher des informations importantes

Même si les états de survol de la souris (à savoir des effets de substitution nécessitant une souris) sont un bon moyen d’ajouter de l’interactivité, évitez de les utiliser pour afficher des informations importantes, car les apprenants malvoyants privilégient la navigation au clavier. Si vous utilisez les états de survol de la souris pour afficher du texte ou des images, pensez à fournir une solution alternative à l’attention des apprenants malvoyants.

Ainsi, n’envisagez pas d’afficher des textes de retour dans les états de survol sans également fournir un autre moyen d’accéder à ces informations, comme un raccourci clavier qui déclenche la lecture d’une version audio des retours.

Fournir des alternatives aux interactions par zones de clic et par glisser-déposer

Les interactions suivantes par zones de clic et par glisser-déposer nécessitent une souris pour la navigation, ce qui les rend difficiles ou impossibles à utiliser pour les apprenants malvoyants. Si vous les ajoutez à votre module, proposez des solutions alternatives commandées depuis le clavier ou à base de texte.

Interactions de style formulaire :

  • Appariement : glisser-déposer
  • Ordonner : glisser-déposer
  • Classer : glisser-déposer
  • Banque de mots : sélectionner-déplacer
  • Zone de clic

Interactions autour des questions à formulation libre :

  • Glisser-déposer
  • Zone de clic

Par exemple, vous pouvez ajouter un lien qui ouvre un calque avec du texte de remplacement pour une interaction de type glisser-déposer, ou vous pouvez permettre aux apprenants de choisir une alternative par curseur aux interactions par zones de clic, car les curseurs réagissent aux flèches du clavier.

Ne pas lancer la lecture automatique des vidéos

Faites en sorte que la lecture des vidéos ne démarre pas automatiquement. Les apprenants malvoyants doivent pouvoir contrôler la lecture des vidéos.

Contrôlez le mode de lecture d’une vidéo en modifiant ses propriétés. Consultez ce guide pour savoir comment procéder.

Si une vidéo illustre une démonstration ou un processus, prévoyez de fournir aux apprenants malvoyants un lien vers un document détaillé décrivant le contenu de cette vidéo.

Utiliser du texte avec un rapport de contraste de 4.5:1

Certains apprenants sont en situation de malvoyance et non de cécité totale. Pour rendre votre module accessible aux apprenants atteints de malvoyance, paramétrez un texte à l’écran avec un rapport de contraste de 4.5:1 ou plus.

Voici un correcteur de contraste particulièrement utile pour déterminer votre rapport de contraste.

Si vous superposez du texte sur une image d’arrière-plan, réduisez la luminosité et/ou le contraste de l’image afin de faciliter la lecture du texte. Vous pouvez aussi positionner une forme semi-transparente entre l’image et le texte afin d’accentuer le rapport de contraste.

Ne pas s’appuyer uniquement sur les couleurs pour véhiculer du sens

Si vous utilisez des couleurs pour fournir des notions importantes de contexte ou de sens, assurez-vous de proposer des éléments textuels, audio ou graphiques équivalents aux apprenants atteints d’une cécité des couleurs.

Par exemple, si vous utilisez le vert pour désigner une bonne réponse et du rouge pour désigner une réponse incorrecte, prévoyez un élément sonore ou du texte à l’écran pour donner les mêmes informations aux apprenants qui ne peuvent pas distinguer le vert du rouge.

De même, ne vous appuyez pas uniquement sur les couleurs pour identifier les liens hypertextes. Par exemple, soulignez du texte lorsqu’il constitue un lien et fournissez des instructions pour les images comportant des liens, de sorte que les apprenants sachent que ces éléments sont interactifs.

Color Oracle est un simulateur gratuit de cécité des couleurs pour Windows, Mac et Linux. Il élimine les incertitudes lorsque vous concevez un module destiné à des apprenants atteints de cécité des couleurs en affichant en temps réel ce qu’ils verront.

Proposer une alternative audio pour le texte à l’écran

Certains apprenants, même en capacité de voir votre module, peuvent préférer l’écouter plutôt que le lire. Ils peuvent présenter des difficultés d’apprentissage, comme la dyslexie, ou ne pas être de bons lecteurs. Ou bien la langue du module peut parfois ne pas être la langue maternelle des apprenants.

Envisagez de proposer à ces apprenants une version audio des diapositives à base de texte. Par exemple, vous pouvez prévoir une voix-off facultative lorsque l’apprenant clique sur une icône de haut-parleur ou presse une touche de raccourci.

Remerciements à Jane Bozarth

Ne pas utiliser de tests chronométrés

Indiquez aux apprenants le temps dont ils ont besoin pour exploiter les supports alternatifs que vous mettez à leur disposition. Évitez les quiz chronométrés.

Obtenir de l’aide lorsque vous en avez besoin

Vous souhaitez approfondir vos connaissances ? Consultez nos suggestions pour vous conformer aux directives de la Section 508 en matière d’accessibilité et aux règles pour l’accessibilité des contenus Web (WCAG). Consultez également notre e-book sur la conception de modules e-learning accessibles.

Vous pouvez également visiter le site http://webaim.org à la recherche de solutions complète d’accessibilité orientées Web, notamment des formations, des outils et une assistance de la communauté d’utilisateurs.

Et lorsque vous avez besoin d’aide, il vous suffit de poser une question à E-Learning Heroes, la communauté e-learning la plus importante et la plus engagée dans le monde. Plus de 400 000 membres sont prêts à vous aider. Il est donc probable qu’un problème auquel vous seriez confronté a déjà été rencontré par quelqu’un d’autre, qui pourra ainsi vous faire part de sa solution.