Vous vous sentez perdu face aux directives d’accessibilité du contenu web (WCAG) ? Vous n’êtes pas seul. Bien qu’il soit essentiel que ces directives existent, la plupart des professionnels du e-learning les trouvent intimidantes. Elles sont longues et rédigées en langage technique, il peut donc être difficile d’être sûr d’avoir bien compris, et encore moins de s’assurer que nos modules soient conformes.

Mais la vérité est que vous n’êtes pas obligé de passer de 0 à 100% d’accessibilité du jour au lendemain. La plupart des professionnels e-learning ne sont pas des experts des WCAG, mais font plutôt de petits pas vers l’accessibilité, en apprenant et en s’améliorant chaque jour.

Dans cet article, j’aimerais vous montrer quelques changements faciles, mais importants, que vous pouvez mettre en œuvre immédiatement pour rendre vos modules plus accessibles.

1. S’assurer que tout le texte est de taille 12 ou plus

Lors de la conception, gardez à l’esprit que la taille du texte doit être suffisante pour que le texte soit clair et lisible. Tout ce que vous avez à faire est de vous assurer que tout le texte de votre module soit défini au moins sur la taille 12. Plutôt simple à mettre en œuvre, n’est-ce pas ? 

2. Utiliser des couleurs sont suffisamment contrastées 

Une autre chose simple que vous pouvez faire pour vous assurer que tous vos apprenants peuvent lire et interagir facilement avec votre contenu est de choisir des couleurs pour les objets de premier plan, comme le texte et les boutons, qui se démarquent de l’arrière-plan. La façon la plus simple de le faire est de mesurer le contraste – ou la différence de luminosité – entre vos couleurs de premier plan et d’arrière-plan à l’aide d’un générateur de palette de couleurs accessible comme celui-ci.

Voici deux règles principales à retenir :

• La couleur de votre texte doit avoir un rapport de contraste de 4,5:1* avec la couleur d’arrière-plan.
• La couleur des éléments de l’interface, comme les boutons, doit avoir un rapport de contraste de 3:1 avec la couleur d’arrière-plan.

Pour plus d’informations sur le contraste, consultez cet article : Considérations sur le contraste pour un e-learning accessible.

3. Insérer des boutons mesurant au moins 44 x 44 pixels

Changer la taille de vos boutons est une autre astuce facile à mettre en œuvre. En réglant la taille de vos boutons pour qu’ils mesurent au moins 44 x 44 pixels, vous vous assurez qu’ils sont faciles à sélectionner pour tous les apprenants, même s’ils ont des déficiences motrices ou visuelles. Découvrez la différence ci-dessous :

35 x 20 pixels	45 x 90 pixels	65 x 185 pixels
Essayez par vous-même

En somme, plus le bouton est gros, plus il est facile à cliquer, car vous n’avez pas à faire autant d’efforts pour cliquer précisément.

4. Ajouter du texte alternatif aux images informatives et masquer les autres

Un autre moyen simple de rendre vos modules plus accessibles consiste à ajouter du texte alternatif aux images informatives de votre module pour expliquer ce qu’elles représentent. Le texte alternatif est le descriptif de l’image que les lecteurs d’écran annoncent aux apprenants. Si une image est simplement décorative, il est conseillé de la masquer pour les outils d’accessibilité afin que l’apprenant n’ait pas à appuyer à plusieurs reprises sur la touche de tabulation ou les touches de navigation du lecteur d’écran pour passer aux éléments importants.

Comment faire la différence entre les images informatives et celles qui sont purement décoratives ? Posez-vous simplement cette question : si je supprime cette image, l’expérience d’apprentissage sera-t-elle affectée ? Si la réponse est oui, c’est une image informative. Si la réponse est non, il s’agit probablement d’une image décorative.

Pour découvrir tout ce qu’il y a à savoir sur la rédaction d’un texte alternatif efficace, lisez cet article.

Vous ne savez pas comment ajouter du texte alternatif ou masquer des images décoratives pour les lecteurs d’écran ? Si vous utilisez les applications Articulate, c’est super simple ! Consultez ces tutoriels pour savoir comment faire :

• Storyline 360 : ajout de texte alternatif pour les lecteurs d’écran (en anglais)
• Storyline 360 : Cacher des objets pour les outils d’accessibilité (en anglais)
• Rise 360 : Comment ajouter du texte alternatif aux images

5. Inclure des sous-titres et des transcriptions pour tout contenu vidéo et audio

Pour rendre votre contenu audio et vidéo plus accessible, commencez à inclure des sous-titres et des transcriptions. Pour les vidéos, assurez-vous d’inclure des descriptions visuelles dans les sous-titres et dans les transcriptions afin que tout le monde puisse bénéficier des informations de contexte supplémentaires contenues dans la vidéo.

Pourquoi inclure à la fois des sous-titres et des transcriptions ? Parce que les personnes sourdes et aveugles ne peuvent pas accéder aux sous-titres. Sans compter que les transcriptions permettent également aux personnes ayant des troubles cognitifs de lire à leur rythme.

Heureusement, l’ajout de sous-titres et de transcriptions est facile dans les applications Articulate ! Consultez ces tutoriels pour les sous-titres :

• Storyline 360 : création et modification des sous-titres avec l’éditeur intégré (en anglais)
• Rise 360 : Comment ajouter des sous-titres à une vidéo

Et pour ajouter des transcriptions, voici ce que je recommande :

• Pour Storyline 360 : ajoutez un bouton qui ouvre un calque contenant le texte de la transcription.
• Pour Rise 360 : ajoutez un bloc Accordéon à un seul onglet sous le bloc audio ou vidéo avec le texte de transcription à l’intérieur.

Si votre module utilise beaucoup d’audio et de vidéo, il est également recommandé d’inclure une transcription téléchargeable au début du module, afin que les apprenants puissent faire ce choix s’ils le souhaitent.

6. Personnaliser, au besoin, l’ordre du focus

Un autre élément qui a un impact important sur l’expérience d’apprentissage des apprenants utilisant des lecteurs d’écran est l’ordre dans lequel le texte et les objets à l’écran sont lus à haute voix, appelé ordre du focus. Et c’est logique ! Imaginez si lorsque les apprenants ouvrent une diapositive avec des onglets interactifs, au lieu de commencer par le premier onglet, ils sont dirigés vers celui du milieu ? Et à partir de là, imaginez si, au lieu de passer à l’onglet suivant, la prochaine tabulation les emmène au titre de la diapositive ? Ce serait une expérience particulièrement frustrante, n’est-ce pas ? Lorsque vous ne définissez pas un ordre de focus logique, les apprenants utilisant des lecteurs d’écran doivent faire un travail supplémentaire pour accéder aux mêmes informations que les autres apprenants, et ce n’est pas une expérience égale.

Heureusement, si vous utilisez Rise 360, l’ordre du focus est pris en charge pour vous, vous n’avez donc pas à vous en soucier. Et si vous utilisez Storyline 360, vous pouvez facilement le personnaliser en suivant les instructions de ce tutoriel : Storyline 360 ​​: personnalisation de l’ordre du focus des objets de la diapositive (en anglais).

Le mot de la fin

La mise en œuvre de ces conseils garantira-t-elle que votre module est conforme à 100 % à toutes les normes WCAG ? Désolée de vous décevoir, mais la réponse honnête est non. Mais vous aurez malgré tout fait un grand pas en avant dans l’accessibilité que vous offrez, ce qui améliorera l’expérience d’apprentissage de tout le monde.

Vous voulez en savoir plus sur la façon de rendre le e-learning accessible ? Consultez cette série d’articles utiles : Tout ce qu’il faut savoir sur l’accessibilité.

Et n’oubliez pas de nous suivre sur Twitter et de vous abonner au blog pour plus de conseils utiles sur tout ce qui concerne le e-learning. Si vous avez des questions, n’hésitez pas à les poser dans les commentaires.

*Selon les directives WCAG, un texte assez grand (≥ 14 en gras ou 18 en normal) peut avoir un rapport de contraste aussi bas que 3:1, mais nous l’avons simplifié pour le rendre plus facile à mémoriser et parce qu’un contraste plus élevé est meilleur.