Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Pimenko
December 19, 2022

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.

Pimenko

December 19, 2022
Tweet

More Decks by Pimenko

Other Decks in Education

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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide