Storyline 360 : Comment Création un module accessible

Dernière mise à jour de l’article le

Cet article s'applique à :

En e-learning, l'accessibilité garantit que votre contenu est conçu pour tous les apprenants, quelles que soient leurs capacités. La création d'un module accessible n'est pas seulement une chose que vous devez faire pour respecter les normes, telles que les directives WCAG (Web Content Accessibility Guidelines) et la Section 508. Lorsque vous améliorez l'accessibilité de votre contenu, tout le monde en profite.

Cet article vous explique comment aider les apprenants à interagir pleinement avec vos cours Storyline 360.

Création votre cours en tenant compte de l'accessibilité

Vous souhaitez que tous les apprenants, y compris ceux qui souffrent de troubles visuels, moteurs, auditifs, vocaux ou cognitifs, comprennent, naviguent et interagissent avec votre module. Rendez les apprenants immédiatement à l'aise avec la mise en page et la conception en fournissant des instructions d'accessibilité au début de votre module.

Voici quelques bonnes pratiques à suivre lorsque vous concevez votre module.

  • Utilisez une conception cohérente. Une conception cohérente facilite la navigation et la compréhension d'un site Web. Formatez les styles de texte et les masques de diapositive pour avoir l'air que vous voulez, puis réutilisez-les tout au long de votre module.
  • Éliminez les distractions. Les conceptions occupées peuvent amener les personnes atteintes de troubles cognitifs à manquer des informations importantes. Vous devez éviter l'encombrement, limiter au minimum les objets animés et utiliser des espaces blancs pour améliorer la lisibilité et la lisibilité.
  • Utilisez un langage clair. Un langage clair et clair approprié à votre contenu aide votre public à lire et à comprendre les informations.
  • Utilisez des polices accessibles. Formatez votre conception pour augmenter la lisibilité en utilisant des polices simples et droites, telles que les polices sans serif. N'utilisez pas le formatage en majuscules, car il est difficile de lire.
  • Utilisez des liens descriptifs. Donnez aux apprenants des liens hypertexte indiquant où cliquer sur le lien les mènera. Par exemple, « cliquez ici » n'indique pas aux apprenants ce que fait le lien. Un lien hypertexte à la place d'une phrase spécifique : « lisez notre déclaration de politique ».
  • Donnez des retour clairs aux apprenants. Les apprenants doivent obtenir une confirmation lorsqu'ils terminent une action, et les messages d'erreur doivent fournir une orientation claire.
  • Fournissez des alternatives textuelles. Utilisez du texte pour communiquer des détails importants. Si vous utilisez des images ou des animations pour fournir un contexte essentiel, proposez des alternatives textuelles aux apprenants présentant une déficience visuelle. Par exemple, utilisez un texte alternatif (alt) pour décrire les images. Vous pouvez également ajouter un lien facultatif vers une diapositive animée qui ouvre une couche statique basée sur du texte avec les mêmes informations pour les apprenants utilisant des lecteurs d'écran.
  • N'utilisez pas de contenu clignotant. En cas d'épilepsie photosensible, un clignotement peut déclencher des crises. Les animations, les GIF et les vidéos ne doivent pas clignoter, clignoter ou clignoter plus de trois fois par seconde.

Rendre le contenu accessible aux lecteurs d'écran et aux claviers

Les apprenants ayant une déficience visuelle utilisent souvent des lecteurs d'écran pour naviguer dans les modules e-learning. Storyline 360 prend en charge les lecteurs d'écran JAWS, NVDA, VoiceOver et TalkBack avec nos navigateurs pris en charge. Les autres apprenants peuvent compter uniquement sur des claviers ou des alternatives de clavier pour naviguer dans le contenu en ligne.

Les déficiences visuelles couvrent un large spectre, y compris la basse vision, le daltonisme et la cécité totale. Il inclut également les apprenants qui ont de la difficulté à lire du texte à l'écran en raison de troubles d'apprentissage ou parce que la langue du module est une langue seconde pour eux. Heureusement, il existe plusieurs façons de rendre votre contenu visuel accessible, comme décrit ci-dessous.

Personnalisez l'ordre de mise au point pour fournir un contexte significatif

L'ordre de mise au point que vous définissez pour chaque diapositive dans Storyline 360 contrôles l'ordre de lecture des lecteurs d'écran et l'ordre de tabulation des éléments interactifs, tels que les boutons, les zones sensibles et les champs de saisie de données. Personnalisez l'ordre de mise au point de chaque diapositive pour avoir le meilleur sens.

Identifier la langue du cours

Storyline 360 ajoute un code de langue pour les lecteurs d'écran à votre fichier story.html publié en fonction de la langue que vous sélectionnez pour vos étiquettes de texte. Vous pouvez facilement passer à une autre langue ou à un autre ensemble d'étiquettes de texte personnalisées.

Personnalisation des étiquettes de texte

Les lecteurs d'écran utilisent des étiquettes de texte pour décrire les boutons, les messages, les instructions du lecteur d'écran et d'autres contrôles du lecteur. Voici tout ce que vous devez savoir sur l'utilisation des étiquettes de texte dans Storyline 360.

Autoriser les apprenants à ignorer les éléments de navigation du lecteur

Laissez les apprenants ignorer la navigation répétitive tout au long de votre module. Lorsque les utilisateurs du clavier et les utilisateurs de lecteurs d'écran passent devant le dernier objet d'une diapositive, ils ont la possibilité de revenir en haut de la diapositive, en contournant toutes les contrôles du lecteur. Ils peuvent appuyer sur la barre d'espace ou sur la touche Entrée pour activer le raccourci sauter la navigation et revenir en haut de la diapositive. Ils peuvent également appuyer sur la touche Tab pour accéder aux contrôles du lecteur.

Conseil : Le raccourci sauter la navigation est activé par défaut, de sorte que les apprenants n'ont pas à naviguer dans toutes les fonctionnalités du lecteur pour entendre à nouveau le contenu de la diapositive. Si vous devez le désactiver, vous pouvez désactiver le raccourci sauter la navigation.

Choisissez les couleurs de l'indicateur de focus visible

Lorsque les apprenants naviguent à l'aide d'un clavier, un plan (appelé indicateur de focus) met en surbrillance l'objet actuellement sélectionné. Sans indicateur de concentration, ces apprenants ne sauront pas où ils se trouvent sur la page. C'est donc essentiel.

Dans Storyline 360, vous pouvez choisir deux couleurs de mise au point. Un indicateur de focus bicolore aide les apprenants à voir le rectangle de focus sur des arrière-plans sombres et clairs.

Rendre les images accessibles

Ajouter un texte alternatif

Le contenu non textuel nécessite un texte alternatif (texte alternatif) pour décrire sa signification aux apprenants utilisant des technologies d'assistance, telles que les lecteurs d'écran. La bonne nouvelle est qu'il est facile d'ajouter du texte alternatif dans Storyline 360.

Il suffit d'ajouter du texte alternatif aux objets qui transmettent un sens ou un contexte à l'apprenant. Cachez des images et des formes purement décoratives des outils d'accessibilité lorsqu'elles ne contribuent pas à la finalité du contenu. Sinon, les utilisateurs de lecteurs d'écran seront fatigués par des annonces inutiles.

Consultez ces conseils pour écrire un bon texte alternatif (extrait de la page 8 de notre e-book sur l'accessibilité) :

  • Transmettez le même contenu et les mêmes informations présentés par l'objet ou l'image, sans avoir à inclure de texte à l'écran.
  • Soyez concis sans lésiner sur les informations pertinentes.
  • N'incluez pas « image de » et « graphique de » et fournissez simplement les informations nécessaires.
  • N'utilisez pas d'abréviations et de ponctuations excessives telles que ***, que les lecteurs d'écran liront de façon agaçante comme « astérisque, astérisque ».

Augmentez la taille de police du lecteur

En tant qu'conception du module, vous avez un contrôle total sur la taille du texte des diapositive, mais qu'en est-il des éléments du lecteur, tels que les boutons, les onglets de la barre latérale et les messages contextuels ? Il est facile de définir la taille de la police à partir d'un pourcentage compris entre 75 % et 200 % dans les paramètres de votre lecteur.

Rendre le contenu audio et vidéo accessible

Ne pas jouer automatiquement

Les utilisateurs de lecteurs d'écran naviguent en écoutant. Par conséquent, n'autorisez pas la lecture automatique du contenu audio ou vidéo. Laissez vos apprenants contrôler la lecture. Voici comment ajuster les propriétés vidéo.

Ajouter des sous-titres codés

Les légendes sont une version texte de l'audio nécessaire pour comprendre le contenu. Importez des sous-titres codés ou créez des sous-titres codés directement dans Storyline 360 avec l'éditeur intégré. C'est facile à faire et produit de gros dividendes.

De plus, le sous-titrage codé ne s'adresse pas uniquement aux apprenants souffrant de déficiences auditives. Si votre module est une deuxième langue pour les apprenants, les légendes peuvent les aider à bien comprendre le contenu. Et les apprenants dans un environnement bruyant apprécieront également les légendes.

Fournir une transcription

Les transcriptions sont converties audio en texte écrit. Ils sont différents des sous-titres codés, qui sont des images à code temporel. Envisagez d'ajouter une transcription via le panneau de notes du lecteur pour chaque diapositive ou une pièce jointe téléchargeable pour l'ensemble du module. Assurez-vous d'inclure les détails nécessaires dans la transcription écrite transmise visuellement dans les images et les vidéos afin que les apprenants aient toutes les informations nécessaires.

Rendre le texte accessible

Utiliser un rapport de contraste de 4, 5:1

Certains apprenants ont une mauvaise vision plutôt qu'une cécité totale. Pour rendre votre module accessible aux apprenants ayant une faible vision, utilisez du texte à l'écran avec un rapport de contraste de 4, 5:1 ou plus par rapport à la couleur d'arrière-plan.

Si vous superposez du texte sur une image d'arrière-plan, réduisez la luminosité et le contraste de l'image pour faciliter la lecture du texte. Vous pouvez également placer une forme semi-transparente entre l'image et le texte pour augmenter le rapport de contraste.

Pour déterminer rapidement le rapport de contraste, essayez ce vérificateur de contraste basé sur le Web ou téléchargez cet outil de vérification de contraste.

Offrez une alternative audio pour le texte à l'écran

Certains apprenants peuvent voir votre module, mais préfèrent écouter plutôt que lire. Ils peuvent avoir des troubles d'apprentissage, comme la dyslexie, peuvent ne pas être des lecteurs forts ou se trouver dans un environnement animé où ils ne peuvent pas se concentrer sur l'écran. Ou peut-être que la langue de votre module est une deuxième langue pour eux. Envisagez de proposer une version audio de diapositives textuelles à ces apprenants. Par exemple, vous pouvez lire une narration facultative lorsque les apprenants cliquent sur une icône d'enceinte ou appuient sur un raccourci clavier.

Laissez Storyline 360 convertir rapidement votre texte en discours si l'enregistrement de la narration semble écrasant. Vous pouvez même choisir la voix et la langue pour vous assurer que chaque mot sonne correctement.

Utiliser le texte accessible, les styles de texte et l'ajustement automatique du texte

Le texte accessible dans Storyline 360 permet aux apprenants de personnaliser la taille et le style du texte en utilisant des feuilles de style personnalisées ou des extensions de navigateur, ce qui le rend plus lisible et accessible que jamais.

Les styles de texte accessibles dans Storyline 360 améliorent la cohérence de la conception et aident les lecteurs d'écran. En effet, les styles de texte partagent la hiérarchie des informations avec les lecteurs d'écran afin qu'ils puissent identifier et annoncer les titres, les hyperliens, les citations et les paragraphes.

Un autre élément essentiel à prendre en compte est la taille du texte. Après tout, si votre copie est trop petite, les apprenants peuvent avoir de la difficulté à la lire. Grâce aux améliorations apportées à l'ajustement automatique du texte, vous pouvez définir des zones de texte à une taille fixe sans réduire le texte s'il déborde. Vous savez donc que vos apprenants pourront le lire facilement.

Activer les contrôles d'accessi

Donnez aux apprenants les moyens de personnaliser leur expérience en activant les contrôles d'accessibilité dans le lecteur de module. Ces contrôles permettent aux apprenants de modifier le mode de zoom, d'activer ou de désactiver le texte accessible et d'activer les raccourcis clavier.

Rendre le contenu interactif accessible

La création de contenu interactif maintient l'engagement de vos apprenants. Les deux éléments interactifs les plus courants sont les fonctions de navigation et les quiz. En outre, Storyline 360 dispose de nombreux objets interactifs, tels que des boutons et des champs de saisie de données, pour créer des diapositives interactives.

Ne comptez pas sur la couleur seule pour transmettre un sens

Si vous utilisez la couleur pour fournir un contexte ou une signification importants, proposez des équivalents texte, audio ou image aux apprenants atteints de daltonisme. Par exemple, si vous utilisez le vert pour indiquer une réponse correcte et le rouge pour indiquer une réponse incorrecte, incluez du texte audio ou à l'écran pour transmettre les mêmes informations aux apprenants qui ne peuvent pas distinguer le vert et le rouge.

De même, ne vous fiez pas uniquement à la couleur pour identifier les liens hypertexte. Par exemple, soulignez le texte à l'aide d'un lien et fournissez des instructions pour les images comportant des liens, afin que les apprenants sachent qu'ils sont interactifs.

Idéalement, il est préférable de travailler avec une personne atteinte de daltonisme afin d'assurer la meilleure expérience possible. Color Oracle est un simulateur de daltonisme gratuit si ce n'est pas une option. Il supprime les conjectures de la conception de la daltonie en vous montrant ce que les personnes atteintes de troubles de la vision des couleurs courantes verront en temps réel.

Ne comptez pas uniquement sur les états survolés pour afficher les détails

Bien que les états de survol (c.-à-d. les effets de survol nécessitant une souris) soient parfaits pour transmettre l'interactivité, ne comptez pas sur eux pour afficher des informations importantes. Pensez à fournir une alternative accessible au clavier si vous utilisez les états de survol pour afficher du texte ou des images. Par exemple, il est possible de modifier la couleur d'un bouton lorsqu'une souris le survole pour indiquer qu'il s'agit d'un objet cliquable. Cependant, vous ne voudriez pas afficher le texte de retour en survol sans fournir un autre moyen d'accéder aux informations. Une alternative à cet exemple serait un raccourci clavier qui lit une version audio du retour pour ceux qui n'utilisent pas de souris.

Ne définissez pas de limites de temps

Les minuteurs peuvent interdire la capacité de l'apprenant à utiliser les alternatives accessibles que vous avez ajoutées ou peuvent créer un obstacle de mise au point. Évitez les temporisateurs de quiz et évitez d'utiliser des déclencheurs pour créer des interactions chronométrées lorsque cela est possible.

Offrez des conseils sur les questions de quiz

Lorsqu'une question de quiz accepte plusieurs choix de réponses, indiquez les instructions pour les utilisateurs de lecteurs d'écran. Voici des exemples d'astuces : plusieurs réponses sont possibles, sélectionnez toutes les réponses qui s'appliquent et remplissez le champ vide.

Fournir des alternatives pour les interactions glisser-déposer

Les interactions par glisser-déposer nécessitent une souris pour la navigation, ce qui les rend difficiles voire impossibles à utiliser pour les apprenants à mobilité réduite. Si vous les ajoutez à votre module, fournissez des alternatives textuelles ou contrôlées par clavier. Par exemple, vous pouvez utiliser une activité interactive accessible au clavier, telle qu'une question correspondante ou une activité interactive de curseur. Vous pouvez également fournir aux apprenants une description textuelle détaillée des informations qu'ils doivent connaître lors de l'activité interactive.

Vous souhaitez concevoir une activité interactive glisser-déposer accessible au clavier ? Découvrez l'exemple téléchargeable de Sarah Hodge et le webinaire gratuit où elle explique comment le construire.

Ajout de l'accessibilité aux images 360°

Une image à 360° est une photo panoramique qui crée des expériences d'apprentissage immersives, telles que des visites virtuelles et des activités exploratoires.

Ajoutez du texte alternatif aux média, aux boutons, aux marqueurs et aux étiquettes de zone de clic dans les interactions à 360° afin que tous les apprenants puissent vivre la même expérience attrayante. Nous avons intégré la navigation accessible afin que vos apprenants puissent utiliser un clavier ou un lecteur d'écran.

Utiliser des calques de dialogue

Transformez une couche standard en couche de dialogue pour rendre les interactions encore plus intuitives et inclusives. Lorsque les apprenants rencontrent une couche de dialogue, la mise au point du clavier reste sur la boîte de dialogue modale et son contenu en atténuant tout le reste dans la fenêtre du navigateur afin que les apprenants ne puissent interagir avec rien d'autre dans le module lorsque la couche est ouverte.

Les apprenants peuvent parcourir les couches de dialogue à l'aide d'un lecteur d'écran ou d'un clavier. Améliorez l'expérience du lecteur d'écran pour les couches de dialogue en définissant des attributs d'accessibilité pour un titre et une description alternatifs.

Obtenez de l'aide quand vous en avez besoin

Vous voulez aller plus loin ? Découvrez notre Storyline 360 Voluntary Product Accessibility Template® (VPAT®), notre e-book gratuit sur la conception de l'apprentissage en ligne accessible et nos webinaires sur l'accessibilité.

Vous pouvez également consulter le site https://webaim.org pour obtenir des solutions complètes d'accessibilité Web, y compris des formations, des outils et un support technique communautaire.

Et lorsque vous avez besoin d'aide, il suffit de poser une question sur E-Learning Heroes, la communauté e-learning la plus importante et la plus engagée au monde. Il y a plus de 1 000 000 membres désireux d'aider. Il y a de fortes chances que quelqu'un ait déjà travaillé sur un problème que vous rencontrez et qu'il aura la sagesse de partager.