Storyline 360 : Comment Création un cours accessible

Dernière mise à jour de l’article le

Cet article s'applique à :

Dans le domaine de l'apprentissage en ligne, 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 simplement quelque chose que vous devez faire pour répondre à des normes, telles que les directives pour l'accessibilité des contenus Web (WCAG) 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 présentant des troubles visuels, moteurs, auditifs, vocaux ou cognitifs, comprennent, naviguent et interagissent avec votre module. Mettez 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 lors de la conception de votre module.

  • Utilisez un design cohérent. Une conception cohérente facilite la navigation et la compréhension d'un site Web. Formatez les styles de texte et les modèles de diapositive comme vous le souhaitez, puis réutilisez-les tout au long de votre module.
  • Éliminez les distractions. Les conceptions surchargées peuvent faire oublier des informations importantes aux personnes atteintes de troubles cognitifs. Vous devez éviter l'encombrement, réduire au minimum les objets animés, permettre au lecteur de basculer en mode plein écran et utiliser des espaces blancs pour améliorer la lisibilité et la lisibilité.
  • Utilisez un langage simple. Un langage simple et clair adapté à votre contenu aide votre public à lire et à comprendre les informations.
  • Utilisez des polices accessibles. Formatez votre conception pour améliorer la lisibilité en utilisant des polices simples et droites, telles que des polices sans empattement. N'utilisez pas de formatage en majuscules, car il est difficile à lire.
  • Utilisez des liens descriptifs. Donnez aux apprenants des hyperliens indiquant dans quel contexte ils pourront cliquer sur le lien. Par exemple, « cliquer ici » n'indique pas aux apprenants à quoi sert le lien. Ajoutez plutôt un Lien hypertexte à une phrase spécifique : « lisez notre déclaration de politique ».
  • Donnez des retour clairs aux apprenants. Les apprenants doivent obtenir une confirmation lorsqu'ils effectuent une action, et les messages d'erreur doivent fournir des instructions claires.
  • Proposez 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 malvoyants. 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 contenant les mêmes informations pour les apprenants utilisant des lecteurs d'écran.
  • N'utilisez pas de contenu clignotant. Dans le cas d'une épilepsie photosensible, le clignotement peut provoquer des crises. Les animations, les GIF et les vidéos ne doivent pas clignoter, clignoter ou scintiller plus de trois fois par seconde.

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

Les apprenants malvoyants 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 compatibles. D'autres apprenants peuvent utiliser uniquement 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. Cela inclut également les apprenants qui éprouvent des difficultés à lire le 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 focalisation 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 pour les lecteurs d'écran et l'ordre de tabulation pour les éléments interactifs, tels que les boutons, les zones réactives et les champs de saisie de données. Personnalisez l'ordre de mise au point de chaque diapositive pour obtenir le plus de sens possible.

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 les autres contrôles du lecteur. Voici tout ce que vous devez savoir sur l'utilisation des étiquettes de texte dans Storyline 360.

Permettre aux apprenants d'ignorer les éléments de navigation des

Permettez aux apprenants d'éviter les navigations répétitives dans votre module. Lorsque les utilisateurs utilisant uniquement le 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 « Ignorer 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 Ignorer la navigation est activé par défaut, de sorte que les apprenants n'ont pas à parcourir toutes les fonctionnalités du lecteur pour réécouter le contenu de la diapositive. Si vous devez le désactiver, vous pouvez désactiver le raccourci Ignorer la navigation.

Choisissez les couleurs de l'indicateur de mise

Lorsque les apprenants naviguent à l'aide du clavier, un plan, appelé indicateur de focus, met en évidence l'objet actuellement sélectionné. Sans indicateur de focus, 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 permet aux apprenants de voir le rectangle de focus au point sur des fonds sombres et clairs.

Augmenter 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 police à partir de n'importe quel pourcentage compris entre 75 % et 200 % dans les paramètres de votre lecteur.

Rendre les images accessibles

Ajouter un texte de remplacement

Le contenu non textuel nécessite un texte alternatif (texte alternatif) pour décrire sa signification aux apprenants à l'aide de 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 vous suffit d'ajouter du texte de remplacement aux objets qui transmettent un sens ou un contexte à l'apprenant. Masquez les images et les formes purement décoratives aux outils d'accessibilité lorsqu'elles ne contribuent pas à l'objectif du contenu. Sinon, les utilisateurs de lecteurs d'écran seront fatigués par des annonces inutiles.

Consultez ces conseils pour rédiger un texte alternatif de qualité (extraits de la page 8 de notre e-book sur l'accessibilité) :

  • Diffusez le même contenu et les mêmes informations que ceux 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 d' « image de » et de « graphisme de » et fournissez simplement les informations nécessaires.
  • N'utilisez pas d'abréviations et de signes de ponctuation excessifs tels que ***, que les lecteurs d'écran liront de manière gênante comme « astérisque, astérisque, astérisque ».

Rendre le contenu audio et vidéo accessible

Ne pas jouer automatiquement

Les utilisateurs de lecteurs d'écran naviguent en écoutant. Ne permettez donc pas que le contenu audio ou vidéo commence à être lu automatiquement. Permettez à vos apprenants de contrôler la lecture. Voici comment régler les propriétés d'une vidéo.

Tirez parti des commandes vidéo accessibles

Activez les contrôles vidéo accessibles de Storyline 360 dans le lecteur moderne afin d'offrir une expérience plus inclusive à tous les apprenants.

Ajouter des sous-titres codés

Les sous-titres sont une version texte de l'audio nécessaire à la compréhension du contenu. Importez des sous-titres codés ou créez des sous-titres codés directement dans Storyline 360 à l'aide de l'éditeur intégré. C'est facile à faire et génère de gros dividendes.

De plus, le sous-titrage codé n'est pas réservé aux apprenants malentendants. Si votre module est une langue seconde pour les apprenants, les sous-titres peuvent les aider à bien comprendre le contenu. Et les apprenants évoluant dans un environnement bruyant apprécieront également les sous-titres.

Fournissez une transcription

Les transcriptions sont converties en audio en texte écrit. Ils sont différents des sous-titres codés, qui sont des trames codées dans le temps. Envisagez d'ajouter une transcription via le panneau de notes des 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 sous forme d'images et de vidéos afin que les apprenants disposent de toutes les informations.

Rendre le texte accessible

Utilisez un rapport de contraste de 4, 5:1

Certains apprenants ont une faible vision plutôt qu'une cécité totale. Pour rendre votre module accessible aux apprenants malvoyants, 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 en ligne ou téléchargez cet outil de vérification de contraste.

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

Certains apprenants peuvent voir votre module mais préfèrent écouter plutôt que lire. Ils peuvent avoir des troubles d'apprentissage, tels que la dyslexie, peuvent ne pas lire attentivement ou se trouver dans un environnement occupé 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 jouer une narration facultative lorsque les apprenants cliquent sur l'icône d'un haut-parleur ou appuient sur un raccourci clavier.

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

Utiliser du texte accessible, des styles de texte et un ajustement automatique du texte

Le texte accessible dans Storyline 360 permet aux apprenants de personnaliser la taille et le style du texte à l'aide de feuilles de style personnalisées ou d'extensions de navigateur, le rendant ainsi plus lisible et accessible que jamais.

Les styles de texte accessibles dans Storyline 360 améliorent la cohérence du design 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 du mal à 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. Ainsi, vos apprenants pourront le lire facilement.

Activer les contrôles d'accessibilité

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 permet à vos apprenants de rester engagés. Les deux éléments interactifs les plus courants sont les fonctionnalités de navigation et quiz. En outre, Storyline 360 possède de nombreux objets interactifs, tels que des boutons et des champs de saisie de données, qui vous permettent de créer des diapositives interactives.

Ne vous fiez pas uniquement à la couleur pour donner du sens

Si vous utilisez la couleur pour fournir un contexte ou une signification importants, proposez des équivalents texte, audio ou image aux apprenants daltoniens. 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 faire la différence entre le vert et le rouge.

De même, ne vous fiez pas uniquement à la couleur pour identifier les hyperliens. Par exemple, soulignez du texte par un lien et fournissez des instructions pour les images comportant des liens, afin que les apprenants sachent qu'elles sont interactives.

Idéalement, il est préférable de travailler avec une personne daltonienne afin de garantir la meilleure expérience possible. Color Oracle est un simulateur de daltonisme gratuit si ce n'est pas une option. Il élimine les conjectures liées à la conception pour le daltonisme en vous montrant ce que les personnes souffrant de troubles courants de la vision des couleurs verront en temps réel.

Ne vous fiez pas uniquement aux états de survol pour afficher les détails

Bien que les états de survol (c'est-à-dire les effets de survol nécessitant l'utilisation d'une souris) soient parfaits pour transmettre de l'interactivité, ne vous fiez pas à eux pour afficher des informations importantes. Envisagez de proposer une alternative accessible par clavier si vous utilisez des états de survol pour afficher du texte ou des images. Par exemple, vous pouvez modifier la couleur d'un bouton lorsque la souris le survole pour indiquer qu'il s'agit d'un objet cliquable. Néanmoins, vous ne voudriez pas afficher le texte du retour en mode survol sans proposer un autre moyen d'accéder aux informations. Une alternative pour cet exemple serait un raccourci clavier permettant de lire une version audio du retour pour ceux qui n'utilisent pas de souris.

Ne fixez pas de limites de temps

Les minuteries peuvent empêcher l'apprenant d'utiliser les alternatives accessibles que vous avez ajoutées ou créer un obstacle à la mise au point. Évitez les chronométreurs 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 du

Lorsqu'une question de quiz accepte plus d'un choix de réponse, incluez des instructions pour les utilisateurs de lecteurs d'écran. Exemples de conseils : plusieurs réponses sont possibles, sélectionnez toutes les réponses qui s'appliquent et remplissez le champ vide.

Créer des Diapositives de résulats de quiz

Storyline 360 inclut des modèles de diapositives de diapositive de résultats de quiz accessibles avec de nouveaux designs respectant les directives de couleur, de contraste et de mise au point, et la possibilité de définir des couleurs de thème personnalisées pour les éléments de quiz corrects et incorrects. Utilisez les nouveaux modèles de diapositives de diapositive de résultat pour créer rapidement des résultats de quiz accessibles par défaut.

Proposer des alternatives pour les interactions par 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, proposez des alternatives basées sur du texte ou contrôlées par clavier. Par exemple, vous pouvez utiliser une activité interactive accessible par clavier, telle qu'une question correspondante ou une activité interactive avec un 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 par 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 créer.

Ajoutez 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 des zones réactives zone de clic le cadre d'interactions à 360° afin que tous les apprenants puissent bénéficier de la même expérience engageante. Nous avons intégré une navigation accessible afin que vos apprenants puissent utiliser un clavier ou un lecteur d'écran.

Utiliser des couches 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, le clavier reste focalisé sur la boîte de dialogue modale et son contenu en estompant tous les autres éléments de la fenêtre du navigateur afin que les apprenants ne puissent pas interagir avec les autres éléments du module lorsque la couche est ouverte.

Les apprenants peuvent parcourir les couches de dialogue avec un lecteur d'écran ou un clavier. Améliorez l'expérience de lecture 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 ? Consultez notre Storyline 360 Voluntary Product Accessibility Template® (VPAT®), notre e-book gratuit sur la conception d'un apprentissage en ligne accessible et nos webinaires sur l'accessibilité.

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

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