Storyline 360 : Comment concevoir un module accessible

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 ne se limite pas à répondre à des normes telles que les Règles 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 modules Storyline 360.

• Concevez votre module en tenant compte de l'accessibilité
• Rendre le contenu accessible aux lecteurs d'écran et aux claviers
• Rendre les images accessibles
• Rendre le contenu audio et vidéo accessible
• Rendre le texte accessible
• Rendre le contenu interactif accessible
• Obtenez de l'aide quand vous en avez besoin

Concevez votre module en tenant compte de l'accessibilité

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

Voici quelques bonnes pratiques à prendre en compte 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. Mettez en forme les styles de texte et les maîtres de diapositives comme vous le souhaitez, puis réutilisez-les tout au long de votre module.
• Éliminez les distractions. Des conceptions surchargées peuvent faire en sorte que les personnes atteintes de troubles cognitifs passent à côté d'informations importantes. Vous devez éviter l'encombrement, réduire au minimum le nombre d'objets animés, activer le mode mode plein écran du lecteur et utiliser les espaces blancs pour améliorer la lisibilité et la lisibilité.
• Utilisez un langage clair. Un langage simple et clair adapté à votre contenu aide votre public à lire et à comprendre les informations.
• Utilisez des polices accessibles. Mettez en forme votre design pour améliorer la lisibilité à l'aide de polices simples et droites, telles que les polices sans serif. N'utilisez pas le formatage en majuscules car il est difficile à lire.
• Utilisez des liens descriptifs. Donnez aux apprenants des hyperliens avec le contexte approprié pour indiquer où ils cliqueront sur le lien. Par exemple, « cliquez ici » n'indique pas aux apprenants à quoi sert le lien. Lien hypertexte vers une phrase spécifique à la place : « Lisez notre déclaration de politique ».
• Donnez des retours clairs aux apprenants. Les apprenants doivent obtenir une confirmation lorsqu'ils terminent une action, et les messages d'erreur doivent fournir des directives claires.
• Proposez des alternatives basées sur du texte. Utilisez du texte pour communiquer des informations importantes. Si vous utilisez des images ou des animations pour fournir un contexte essentiel, proposez des alternatives textuelles aux apprenants aveugles ou 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 calque textuelle statique 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 déclencher des crises. Les animations, les GIF et les vidéos ne doivent pas clignoter, clignoter ou scintiller plus de trois fois par seconde.

Storyline 360 vous permet de créer des modules de support technique WCAG 2.1 de niveau AA. Des détails spécifiques sur les critères de réussite sont décrits dans notre modèle volontaire d'accessibilité des produits (VPAT). Exceptions : Storyline 360 ne prend pas en charge la version 1.3.5 Identify Input Input pour les champs de saisie de données ou la version 3.1.2 Language of Parts pour plusieurs langues de lecture d'écran dans le même module.

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

Les apprenants aveugles ou malvoyants utilisent souvent des lecteurs d'écran pour naviguer dans les modules e-learning. Storyline 360 est compatible avec les lecteurs d'écran JAWS, NVDA, VoiceOver et TalkBack avec nos navigateurs compatibles. Les autres apprenants peuvent se fier uniquement aux claviers ou à d'autres claviers pour naviguer dans le contenu en ligne. Cliquez ici pour savoir comment vos apprenants naviguent dans le contenu des diapositives à l'aide d'un clavier ou d'un lecteur d'écran.

Les limitations visuelles couvrent un large spectre, y compris la basse vision, le daltonisme et la cécité totale. Cela inclut également les apprenants qui ont du mal à 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 moyens 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ôle 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 de clic et les champs de saisie de données. Personnalisez l'ordre de mise au point de chaque diapositive de manière à ce qu'il soit le plus logique possible.

Identifier la langue du Module

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.

Personnaliser les libellés de texte

Les lecteurs d'écran utilisent des libellés 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 du Lecteur

Permettez aux apprenants d'éviter la navigation répétitive tout au long de 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 peuvent revenir en haut de la diapositive, en contournant tous les contrôles du lecteur. Ils peuvent appuyer sur la barre d'espace ou sur la touche Entrée pour activer le raccourci de navigation et revenir en haut de la diapositive. Ils peuvent également appuyer sur la touche Tab pour passer aux contrôles du lecteur.

Conseil : Le raccourci de navigation « sauter » est activé par défaut, de sorte que les apprenants n'ont pas à parcourir 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 de navigation « sauter ».

Choisissez les couleurs de l'indicateur de mise au point visible

Lorsque les apprenants naviguent à l'aide d'un clavier, un plan, appelé indicateur de focalisation, 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 mise au point bicolore permet aux apprenants de voir le rectangle de mise au point sur fond clair ou foncé.

Augmenter la taille de police du Lecteur

En tant qu'auteur du module, vous avez un contrôle total sur la taille du texte des diapositives, mais qu'en est-il des éléments du lecteur, tels que les boutons, les onglets des barres latérales 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 alternatif

Le contenu non textuel a besoin d'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, c'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. Masquez les images et les formes purement décoratives dans les 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é) :

• Transmettez le même contenu et les mêmes informations que ceux présentés par l'objet ou l'image, sans qu'il soit nécessaire d'inclure du texte à l'écran.
• Soyez concis sans lésiner sur les informations pertinentes.
• N'incluez pas « image de » ni « graphique de » et fournissez simplement les informations nécessaires.
• N'utilisez pas d'abréviations ni de signes de ponctuation excessifs tels que ***, que les lecteurs d'écran interpréteront de manière ennuyeuse 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. Par conséquent, n'autorisez pas la lecture automatique de contenus audio ou vidéo. Laissez vos apprenants contrôler la lecture. Voici comment ajuster les propriétés de la vidéo.

Tirez parti des commandes vidéo accessibles

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

Ajouter des sous-titres

Les sous-titres 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 directement dans Storyline 360 grâce à l'éditeur intégré. C'est facile à faire et cela rapporte de gros dividendes.

De plus, le sous-titrage codé n'est pas réservé aux apprenants sourds ou 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.

Fournir une transcription

Les transcriptions sont des fichiers audio convertis en texte écrit. Ils sont différents des sous-titres codés, qui sont des cadres temporels. Générez automatiquement des transcriptions vidéo synchronisées à partir de sous-titres codés.

Rendre le texte accessible

Utilisez un rapport de contraste de 4, 5:1

Certains apprenants ont une basse vision plutôt qu'une cécité totale. Pour rendre votre module accessible aux apprenants malvoyants, utilisez du texte affiché à 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 en faciliter la lecture. Vous pouvez également placer une forme semi-transparente entre l'image et le texte pour augmenter le taux de contraste.

Pour déterminer rapidement le taux 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 au texte affiché à l'écran

Certains apprenants peuvent voir votre module, mais préfèrent l'écouter plutôt que le lire. Ils peuvent avoir des troubles d'apprentissage, tels que la dyslexie, ne pas être de bons lecteurs ou vivre 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 langue seconde 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 voix 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 bien.

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 à 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 risquent d'avoir du mal à la lire. Grâce aux améliorations apportées à l'ajustement automatique du texte, vous pouvez définir une taille fixe pour les zones de texte 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 module lecteur. 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 de maintenir l'engagement de vos apprenants. Les deux éléments interactifs les plus courants sont les fonctionnalités de navigation et les quiz. En outre, Storyline 360 propose 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 transmettre du sens

Si vous utilisez la couleur pour fournir un contexte ou un sens important, 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 du texte à l'écran pour transmettre les mêmes informations aux apprenants qui ne peuvent pas faire la distinction entre le vert et le rouge.

De même, ne vous fiez pas uniquement à la couleur pour identifier les hyperliens. Par exemple, soulignez le texte avec un lien et fournissez des instructions pour les images contenant 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 incertitudes liées à la conception pour le daltonisme en vous montrant ce que les gens 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 favoriser l'interactivité, ne vous fiez pas à eux pour afficher des informations importantes. Envisagez de proposer une alternative accessible au clavier si vous utilisez les états de survol pour afficher du texte ou des images. Par exemple, vous pouvez changer la couleur d'un bouton lorsque la souris le survole pour indiquer qu'il s'agit d'un objet cliquable. Néanmoins, vous ne souhaiteriez pas afficher le texte des commentaires en survol sans fournir un autre moyen d'accéder aux informations. Pour cet exemple, une alternative 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 à sa concentration. Évitez les minuteries de quiz et évitez d'utiliser des déclencheurs pour créer des interactions chronométrées dans la mesure du possible.

Offrez des conseils sur les questions du quiz

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

Créez des diapositives de résultats de quiz accessibles

Storyline 360 inclut des modèles de diapositives de résultats de quiz accessibles avec de nouveaux designs conformes aux directives relatives aux couleurs, au contraste et à la mise au point, ainsi que 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 résultats pour créer rapidement des résultats de quiz accessibles par défaut.

Proposer des alternatives aux interactions par glisser-déposer

Les interactions par glisser-déposer nécessitent une souris pour naviguer, ce qui les rend difficiles, voire impossibles, 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 le clavier. Par exemple, vous pouvez utiliser une activité interactive accessible au clavier, telle qu'une question correspondante ou une interaction avec un curseur. Vous pouvez également fournir aux apprenants une description textuelle détaillée des informations dont ils ont besoin lors de l'activité interactive.

Vous souhaitez concevoir une activité interactive par glisser-déposer accessible au clavier ? Consultez 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édias, aux boutons, aux marqueurs et aux libellés de zone de clic dans le cadre d'interactions à 360° afin que tous les apprenants puissent vivre la même expérience engageante. Nous avons intégré un système de 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 calque de dialogue, le clavier reste concentré sur la boîte de dialogue modale et son contenu en estompant le reste de la fenêtre du navigateur afin que les apprenants ne puissent interagir avec aucun autre élément du module lorsque la couche est ouverte.

Les apprenants peuvent parcourir les calques de dialogue à l'aide d'un lecteur d'écran ou d'un clavier. Améliorez l'expérience du lecteur d'écran pour les calques 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 index d'accessibilité, notre e-book gratuit sur la conception d'un apprentissage en ligne accessible et nos webinaires sur l'accessibilité.

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

Et si vous avez besoin d'aide, il vous suffit de poser une question à E-Learning Heroes, la communauté d'apprentissage en ligne la plus importante et la plus engagée au monde. Plus de 1 000 000 de membres sont prêts à 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 le partager.