1 Le partenaire audacieux de vos formations digitales 12 bonnes pratiques sur l’accessibilité pour concevoir un module e-learning avec Articulate Storyline

2 Chez P!MENKO nous sommes particulièrement attentifs à la diversité et à l’inclusion. Cela implique de suivre des bonnes pratiques en matière d’accessibilité numérique pour garantir une bonne consultation de vos modules e-learning par tous les publics. Voici quelques exemples concrets où le respect des règles d’accessibilité numérique garantie une bonne consultation de vos e-learning par tous : o Une personne dyslexique aura une lecture des textes écrits facilitée avec le choix d’une police adaptée o Une personne daltonienne pourra interpréter correctement un graphique ou une légende grâce aux choix des couleurs et à la bonne mise en page o Une personne sourdre ou malentendante pourra comprendre une vidéo ou un son grâce aux sous-titres o Une personne malvoyante pourra utiliser un assistant vocal afin de consulter le module o Une personne avec des difficultés motrices (par exemple tremblement des mains) pourra utiliser la navigation au clavier Ce guide vise à vous présenter les principales bonnes pratiques sans chercher à être exhaustif sur l’ensemble des règles à respecter.

3 16 L’accompagnement Pimenko 7 1. Concevoir un design adapté 6 Comment rendre votre module accessible avec Storyline ? 4 Les niveaux d’accessibilité 3 L’accessibilité numérique, quels enjeux ? 8 2. Paramétrer les fonctionnalités Storyline 10 3. Intégrer et paramétrer les médias et les contenus 15 4. Utiliser des activités, interactions et animations adaptées au niveau d’accessibilité visé SOMMAIRE

4 L’ACCESSIBILITÉ NUMÉRIQUE, QUELS ENJEUX ? Comment garantir l’accessibilité numérique d’un module e-learning réalisé avec Storyline ? Tout simplement en respectant et en appliquant les règles du WCAG* ou du RGAA** dans vos elearning sous Storyline. Pimenko vous accompagne dans cette démarche grâce grâce à une prise en compte par notre équipe des règles de conception graphiques, éditoriales, fonctionnelles et techniques. Garantir l’accès à une formation de qualité, enrichissante, motivante et bien entendu accessible est indispensable pour les formations numériques. Pour atteindre cet objectif, il est indispensable de penser à TOUS ! Aux personnes avec des déficiences motrices ou cognitives, aux personnes sourdes, malentendantes, malvoyantes ou aux personnes avec des troubles DYS. C’est pourquoi les modules e-learning doivent satisfaire différents critères d’accessibilité numérique. Les règlements internationaux (WCAG*) ou nationaux (RGAA** pour la France) permettent d’identifier les bonnes pratiques à respecter. Au niveau international, les règles d’accessibilité numérique de référence se nomment les WCAG (Web Content Accessibility Guidelines). Elles sont publiées par le consortium international qui s’appelle le W3C (World Wide Web Consortium). En France, le nom du référentiel national est le RGAA (Référentiel Général d’Amélioration de l’Accessibilité). Il reprend les WCAG mais se distingue par un classement en thématique et par un contenu composé de séries de questions. Les standards internationaux d’accessibilité numérique sont les mêmes dans tous les pays Il existe néanmoins différents référentiels :

5 5 • Sous-titrage des fichiers audios et vidéos Niveau A • Sous-titrage des fichiers audios et vidéos • Respect des règles techniques et éditoriales • Audio-description des vidéos • Transcription textuelle des audios • Contraste couleur de niveau 4,5:1 Niveau A A Le niveau A A A • Sous-titrage des fichiers audios et vidéos • Respect des règles techniques et éditoriales • Audio-description des vidéos • Contraste couleur de niveau 7:1 • Transcription textuelle des audios & des vidéos • Traduction des audios en langage des signes Le meilleur niveau qui peut être significativement plus coûteux et complexe notamment si l’accessibilité n’est pas anticipé dès le début de projet et maitrisé par l’équipe Modules PIMENKO Le plus rapide à mettre en œuvre mais peu accessible Le niveau minimum visé sur nos projets : il élargit l’accès au module. Pas si compliqué si les bonnes pratiques sont appliquées dès le début du projet ! LES NIVEAUX D’ACCESSIBILITÉ Chaque niveau est associé à un ou plusieurs critères d’accessibilité. Ils ont un impact sur la conception et le développement de vos modules au niveau graphique, éditoriale et technique. Voici les principales spécificités en fonction des différents niveaux d’accessibilité (liste non exhaustive). R G A A Nos modules sont au minimum conformes aux niveaux AA

6 COMMENT RENDRE VOTRE MODULE ACCESSIBLE AVEC ARTICULATE STORYLINE ? En dehors des bonnes pratiques éditoriales non abordées dans ce document, voici 12 bonnes pratiques concrètes pour les modules e-learning réalisés avec Articulate Storyline (liste non exhaustive) : CONCEVOIR UN DESIGN ADAPTÉ PARAMÉTRER LES FONCTIONNALITÉS DE STORYLINE INTÉGRER ET PARAMÉTRER LES MÉDIAS ET LES CONTENUS UTILISER DES ACTIVITÉS, INTÉRACTIONS ET ANIMATIONS ADAPTÉES AU NIVEAU D’ACCESSIBILITÉ 1 2 3 4 Choisir les couleurs et les polices appropriées Définir le format et le niveau des textes (titres H1, H2, H3, sous-titres, consignes) en utilisant une feuille de style cohérente Utiliser et paramétrer le lecteur de Storyline Rendre fonctionnelle la navigation au clavier et les raccourcis Utiliser les fonctionnalités de contenu du player Paramétrer l’ordre de focus Sélectionner les « calques » de diapositive Intégrer et adapter les textes alternatifs Garantir le contrôle des médias à consulter Intégrer des aides textuelles aux médias audio-visuels Concevoir ou choisir des activités accessibles Limiter les interactions et animations « perturbantes »

7 7 Choisir les couleurs et des polices appropriées (notamment la combinaison entre une couleur de texte et une couleur de fond) La couleur et la taille de textes, icônes, schémas, boutons de navigation et focus, doivent avoir un contraste suffisant avec la couleur en arrière-plan. Pour atteindre le niveau AA, le texte et son arrière-plan doivent avoir un ratio minimal de 4.5*. À Pimenko, nous visons le niveau AAA et nous utilisons des outils comme Webaim Contrast Checker . Nous vous accompagnons dans le choix des couleurs, des polices des textes, du design général. Ratio 2,2 Ratio 4,5 Bloc de texte Définir le format et le niveau des textes en utilisant une feuille de style cohérente Les niveaux/styles de textes permettent aux utilisateurs de lecteur d’écran de distinguer la hiérarchie des contenus présents à l’écran. Exemple : titre d’écran (h1, h2, h3, etc), contenu, consigne de navigation… Nous garantissons l’intégration des niveaux de titres des les premiers prototypes et dans toute la phase de développement. *Celui-ci est déterminé en fonction de la couleur, taille et graisse des polices de texte. Ratio 3,23 Ratio 4,53 Bouton de navigation Le design général est essentiel pour un module e-learning accessible. Tout au long du projet il faut adopter des bonnes pratiques, notamment : 1 - CONCEVOIR UN DESIGN ADAPTÉ 7

8 Paramétrer les options d’accessibilité du lecteur Storyline L’accès aux options d’accessibilité complète de Storyline nécessite d’utiliser le « lecteur moderne » plutôt que le « lecteur classique » ou un lecteur créé sur mesure. Cela garanti la compatibilité du module avec les logiciels d’assistance vocale et la navigation au clavier. Nous vous accompagnons dans le choix des fonctionnalités à activer dans le lecteur en fonction de votre projet. Rendre fonctionnelle la navigation au clavier et les raccourcis Il est pertinent d’ajouter au module une page d’aide à la navigation pour présenter les raccourcis claviers disponibles aux utilisateurs de lecteurs d’écran. Il faut également s’assurer d’utiliser correctement les fonctionnalités de Storyline qui permettent la navigation au clavier et l’utilisation des raccourcis clavier. Nous garantissons une navigation au clavier fonctionnelle et adaptée au niveau d’accessibilité visé. 2 - Storyline dispose de nombreuses fonctionnalités techniques pour rendre un module elearning accessible. Voici les plus importantes. PARAMÉTRER LES FONCTIONNALITÉS STORYLINE 8

9 9 9 Utiliser les fonctionnalités de contenu du player 2 - PARAMÉTRER LES FONCTIONNALITÉS STORYLINE L’accessibilité va plus loin que la manière dont un contenu s’affiche à l’écran. Il est tout aussi nécessaire de l’inclure de manière transversale. Fonctionnalité Menu Grâce à un menu soigneusement paramétré, l’utilisateur a des moyens pour se repérer à l’intérieur du parcours, d’accéder à des sections spécifiques et d’identifier la hiérarchie des contenus du cours. Fonctionnalité « aide » De la même manière, faire recours au bouton « aide » permet au participant de retrouver des informations de navigation à tout moment, indépendamment de l’écran en cours de consultation. Ceci est particulièrement utile pour des personnes avec un handicap cognitif ou pour un public novice des modules e- learning. Fonctionnalité « glossaire » Selon le public visé et la nature du contenu de formation, la construction d’un glossaire général peut être envisagé. C’est un outil pédagogique et accessible qui peut être consulté à tout moment. Nous veillons à renommer et organiser les écrans et les scènes (groupe d’écrans) pour qu’ils constituent un menu général clairement structuré.

10 10 Paramétrer l’ordre de focus Lorsqu'une assistance vocale est utilisée sur un périphérique (ordinateur, smartphone, tablette), l’ordre de focus définit la manière dont un lecteur d’écran va « lire » les éléments présents à l’écran. • La 1ère étape consiste à supprimer de la navigation les éléments « non essentiels » à la compréhension du contenu (logos, icônes, illustrations non porteuses de sens, etc.) • La 2ème étape consiste à mettre tous les éléments dans le bon ordre de lecture. Il faut également penser à compléter les textes alternatifs et les balises « alt ». Étape 1 : suppression d’éléments Étape 2 : réorganisation du focus Dans cette activité, il y a une vingtaine d’éléments à organiser et d’autres à masquer dans l’ordre de focus. À Pimenko, nous organisons et paramétrons l’ordre de focus de chaque écran du module. Ces étapes doivent être intégrées dès le travail sur les masques de diapositive et lors de la conception de chaque écran pour être efficace. INTÉGRER ET PARAMÉTRER LES MÉDIAS ET LES CONTENUS 3 - Un module se compose de textes, sons, images, vidéos. Lors de la médiatisation, il y a un panel de bonnes pratiques à suivre. En voici quelques unes : 10

11 11 Sélectionner les « calques » de diapositive Il existe 2 types de calques dans Storyline : « classique » et « boîte de dialogue ». Les calques « classiques » sont utilisés pour afficher des contenus à l’écran à partir des actions du participant. Ils sont très utiles pour expliquer davantage de contenus appartenant à une catégorie d’information. Par exemple, les activités du type « cartes à retourner » utilisent cette fonctionnalité. De leur côte, les calques de type « boîte de dialogue » permettent à l’utilisateur de focaliser son attention uniquement sur le contenu dans la boite de dialogue. Il ne peut cliquer sur aucun élément qui est à l’arrière-plan de l’écran, ni sur le menu. Quelle importance pour l’accessibilité ? Cela permet à l’utilisateur et à son logiciel d’assistance technique (ex. lecteur d’écran) de se concentrer uniquement sur les éléments disponibles sur le calque en cours de lecture. Aussi, ce type de calques permet d’optimiser le temps d’accès à l’information en premier plan, car il limite significativement le nombre d’éléments à parcourir avec le clavier. Nous sélectionnons le type de calque en fonction du contenu « essentiel » à mettre en focus principal. Calque « classique » Calque « boîte de dialogue » Le focus se concentre uniquement sur la lecture du cadre texte présent en avant-plan de l’écran. Tout autre élément de l’interface est désactivé. 3 - INTÉGRER ET PARAMÉTRER LES MÉDIAS ET LES CONTENUS 11 Les éléments du lecteur (entête, menus et boutons de navigation) ainsi que les éléments dans le calque sont identifiés par le focus.

12 12 Intégrer et adapter les textes alternatifs Les textes alternatifs correspondent aux textes qui sont lus par le lecteur d’écran, selon l’ordre du focus préétabli. Ils permettent de décrire des schémas, visuels ou illustrations porteuses de sens. Ils permettent aussi de rendre pleinement fonctionnelle la navigation, la lecture des consignes ou encore les options de réponses d’un quiz. À Pimenko, nous ajustons et paramétrons les textes alternatifs des éléments lus par le lecteur d’écran. Nous ajoutons le texte ‘alt’ Ajout du texte de balise « alt » La voix de synthèse du lecteur dira : « Cohésion sociale, choix 4 ». Adaptation du texte « alt » Nous avons adapté le texte « alt » du feedback. Il est différent du texte écrit dans le calque de feedback et il rappelle les informations fournies par les visuels qui montrent les bonnes réponses. « Les bonnes réponses sont Transdev, Société Forestière, Compagnie des Alpes et RTE. La xxx compte plus de 20 filiales de droits privés qui agissent dans des domaines aussi variés que le logement, le transport, l'énergie, et le tourisme.... » 3 - INTÉGRER ET PARAMÉTRER LES MÉDIAS ET LES CONTENUS Exemple sur un quiz et des calques de feedback Après validation d’une question de quiz, le lecteur d’écran lit le calque de feedback (par exemple « Pas tout à fait ! »). La lecture n’inclut pas automatiquement le rappel des « bonnes » et des « mauvaises » réponses qui sont indiqués à l’écran en lien avec un code couleur (vert et rouge par exemple). Il faut adapter le « Feedback » pour garantir que les informations en lien avec les bonnes réponses soient accessibles par un utilisateur malvoyant. 12

13 13 Garantir le contrôle des médias à consulter Il est important que les utilisateurs puissent contrôler les médias de type vidéo ou son. Cela leur permet de découvrir le contenu des médias à leur rythme et de les ajuster à leurs besoins. Pour ce faire, nous agissons à deux niveaux : Paramètres du média à l’intérieur de l’écran : démarrer la lecture du média à partir d’une action de l’utilisateur (clique ou sélection du bouton « play ») ; relier la progression du média avec la barre du lecteur (play/pause, avancer/reculer) ; vérifier que les médias ne se déclenchent automatiquement. Paramètres du média à partir du player : mettre les médias en pause, de les relancer, d’avancer ou de reculer ; couper ou monter le son des médias à l’écran à partir du clique ou d’un raccourci clavier. À Pimenko, nous veillons également à ce qu’il n’y a pas de médias audio dans le module qui empêchent d’entendre ou de comprendre l’audio du lecteur d’écran. 13 Paramétrage à l’intérieur de l’écran Paramétrage du lecteur 3 - INTÉGRER ET PARAMÉTRER LES MÉDIAS ET LES CONTENUS Cet écran présente du texte accompagné de voix-off et une vidéo. La vidéo ne démarre qu’au clique du bouton « play ». Lors de l’activation de la vidéo et si nécessaire, le son voix-off est coupé pour ne pas se se superposer avec le son de la vidéo. Le focus se concentre ici sur la lecture du cadre texte présent en avant-plan de l’écran.

14 14 Intégrer des aides textuelles aux médias audio-visuels SOUS-TITRES, TRANSCRIPTIONS & AUDIODESCRIPTIONS Des options permettent aux personnes malentendantes et malvoyantes de comprendre le contenu audios intégrés dans le module (exemple : son d’une vidéo, son d’un motion design, podcast, son d’un tutoriel vidéo…). Cela nécessite généralement de passer par des aides textuelles. Exemple d’audio-description. Source : YouTube – Valentin Haüy : « Un regard pour 2 » Exemple de transcription textuelle Source : YouTube – « Je fais de mon mieux - le podcast des écolos imparfaits » Audio-description des vidéos Nous ajoutons une information complémentaire à la bande sonore principale, qui décrira les éléments significatifs présents à l’écran. Exemple : schéma, postures et expressions des acteurs. Transcription textuelle des audios Nous ajoutons un document texte complémentaire qui retranscrit les paroles et les bruitages significatifs présentes dans l’audio. Sous-titrage des médias audio et vidéo Nous ajoutons une transcription synchronisée de la voix-off. Exemple : pour les motions design sans bulles de dialogue. 3 - INTÉGRER ET PARAMÉTRER LES MÉDIAS ET LES CONTENUS 14

15 15 Concevoir ou choisir des activités accessibles Certaines activités comme les glisser-déposer* ou les appariements ne sont pas accessibles par défaut. En effet, la navigation au clavier ne permet pas de déplacer des objets à l’écran. Il est préférable d’utiliser d’autres activités (cases à cocher, sélection de formes ou d’images à cliquer…) ou de les développer sans passer par les fonctionnalités par défaut de Storyline et mobilisant des astuces techniques. Limiter les interactions ou les animations « perturbantes » Certaines interactions ou animations peuvent être perturbantes pour des utilisateurs : ambiance sonore en continue, animations de plus de 5 secondes, découverte par survol, temps de consultation d’un écran limité. Certains choix pédagogiques ou techniques peuvent ne pas être adaptés à des utilisateurs en situation de handicap. QCM Zone de saisie Zone de clic Menu déroulant Jeu du buzzer 4 - UTILISER DES ACTIVITÉS, INTERACTIONS ET ANIMATIONS ADAPTÉES AU NIVEAU D’ACCESSIBILITÉ VISÉ 15 Nous vous accompagnons pour sélectionner et proposer des activités compatibles avec le niveau visé par votre module. Nous proposons des alternatives en fonction des enjeux pédagogiques et des possibilités techniques.

16 • Une direction artistique et un design général qui tiennent compte des règles d’accessibilité • Une médiatisation avec une feuille de style et un développement technique qui permet la navigation au clavier et l’utilisation des raccourcis • La mise en place des éléments techniques pour le bon fonctionnement des assistances vocales ou la mise à disposition des aides nécessaires (l’ordre de focus, l’ajout des textes alternatifs, les sous-titres, les transcriptions textuelles, etc.) • Une rédaction qui prend en compte les règles éditoriales • Et toutes les autres bonnes pratiques que nous pourrions lister mais que nous avons acquis au fil des années ! NOUS VOUS ACCOMPAGNONS DANS LES CHOIX : NOUS RÉALISONS : • Du niveau d’accessibilité à viser avec votre public de formation • Des couleurs, des polices des textes, du design général • Du lecteur storyline et des fonctionnalités techniques à mettre en œuvre • Des activités adaptées avec le niveau d’accessibilité visé EN RÉSUMÉ

17 Pimenko • 11 rue de l’Annonciade • 69001 LYON • 06.31.34.87.20 • pimenko.com Votre contact : [email protected] Décembre 2022