Les régles d'accessibilité numérique pour vos modules e-learning avec Articulate Storyline (WCAG 2.0 / RGAA) - Pimenko

Les régles d'accessibilité numérique pour vos modules e-learning avec Articulate Storyline (WCAG 2.0 / RGAA)

Comment les modules e-learning réalisés sous Storyline peuvent répondre aux critères d’accessibilité numérique définis par des règlement international (WCAG*) et national (RGAA**) ?

Retrouvez notre guide avec les essentiels pour réussir la conception graphique, éditoriale et le développement technique de vos elearning sous Storyline.

Transcript

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

   View Slide

2. 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.
   

   View Slide

3. 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
   

   View Slide

4. 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 :
   

   View Slide

5. 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
   

   View Slide

6. 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 »
   

   View Slide

7. 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
   

   View Slide

8. 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
   

   View Slide

9. 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é.
   

   View Slide

10. 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
    

    View Slide

11. 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.
    

    View Slide

12. 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
    

    View Slide

13. 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.
    

    View Slide

14. 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
    

    View Slide

15. 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.
    

    View Slide

16. 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É
    

    View Slide

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

    View Slide