Les contenus textuels accessibles dans Moodle.

Observons les différents types de contenu textuel que l’on peut trouver dans du contenu pédagogique. Nous verrons comment rendre ces contenus textuels accessibles dans Moodle

Les textes.

Les titres.

exemple de selection de titre H2, H3, H4

Déjà, les titres et sous-titres distinguent et résument les points principaux, ce qui peut avoir un impact considérable sur l’efficacité de votre contenu. Ensuite, pensez aux titres comme à une signalisation conceptuelle ou à des points de repère, sans lesquels les personnes ayant des problèmes de mémoire à court terme ou des difficultés de concentration ou utilisant une technologie d’assistance peuvent avoir des difficultés.

Les titres sont essentiels pour les contenus longs !

De plus, les titres permettent également de hiérarchiser les sections et les sous-sections. Il est important d’utiliser l’ordre séquentiel correct, c’est-à-dire de ne pas sauter de H3 à H5.

Les titres sont structurants et précisent le contexte.

Mais aussi, lorsque vous utilisez des titres vous créez une structure claire pour vos informations en utilisant l’une des méthodes de classement suivantes :

  • Importance.
  • Chronologique.
  • Alphabétique.

Conseil important pour les utilisateurs et les utilisatrices de Moodle :

Enfin, si vous utilisez un thème graphique particulier et que les titres disponibles ne sont pas stylisés comme vous le souhaitez, corrigez-les dans le “thème” ‘si cela est possible) plutôt que de laisser les utilisateurs ultérieurs se battre pour modifier les informations par la suite. Cela peut souvent être fait dans les paramètres de personnalisation CSS.

image de post-it avec le texte : À retenir !

Conseils pour les titres.

  • Essentiel pour des contenus longs.
  • Structurant
  • En contexte
  • Suivre la hiérarchie : H1, H2, H3, H4, H5

Le texte.

exemple de texte

Les majuscules.

Pour commencer, veillez à ne pas écrire en majuscules, sauf pour les acronymes bien sûr et penser à bien accentuer les caractères en majuscule.

Attention au contraste des couleurs.

Quelle est l’importance du contraste des couleurs ? Ce n’est qu’en cas de mauvais éclairage et de problèmes de vue que le contraste des couleurs devient un obstacle plus évident à l’accessibilité du contenu. WebAIM propose un excellent outil de vérification du contraste qui vous aidera à vérifier le contraste entre deux couleurs pour vous assurer qu’elles sont accessibles à tous les apprenant·e·s.

Ne pas créer du sens avec une couleur.

Essayez d’éviter de créer du sens avec une couleur. Bien qu’il soit courant d’utiliser des couleurs telles que le vert et le rouge, il faut éviter de le faire, sauf si le sens est également transmis par le contenu lui-même, par des mots tels que oui ou non. Pensez également à l’aspect que pourrait avoir un document imprimé en noir et blanc.

Donnez un nom cohérent aux ressources.

De plus, soyez cohérent dans l’attribution des noms. Une dénomination simple et efficace est essentielle. Il arrive souvent que les pages d’un site Web contiennent des liens vers une présentation ou des diapositives. Si vous avez sept liens ou plus sur une page intitulée “diapositives”, c’est une mauvaise façon de procéder et un manque de contexte. Une dénomination cohérente implique un texte tel que “Semaine 1”, “Semaine 2”, etc. N’appelez pas chaque Powerpoint “Présentation1.pptx”.

Les listes avec les balises HTML <ol> & <ul>.

Mais aussi, utilisez différents types de listes pour regrouper les informations en fonction de leur nature afin de fournir une orientation aux utilisateurs.

Balises HTML sémantique <strong>, mais pas <b> etc.

Le HTML sémantique consiste à utiliser, dans la mesure du possible, les éléments HTML corrects pour leur objectif correct. Les composants sémantiques sont des éléments qui ont une signification. Alors, utilisez la baliseHTML <strong> au lieu de <bold> pour un texte ayant une signification plus importante. Le mettre en gras.

image de post-it avec le texte : À retenir !

Conseils pour le texte.

  • Ne pas écrire en majuscule sauf pour les acronymes.
  • Toujours finir par un point.
  • Utliser les majuscules accentuées.
  • Attention au contraste des couleurs.
  • Ne pas créer du sens avec une couleur.
  • Donnez un nom cohérent aux ressources.
  • Les listes avec les balises HTML <ol> & <ul>.
  • Balises HTML <strong>, mais pas <b> etc.

Les liens

Image représentant un lien hypertexte

Sans oublier que les liens hypertextes sont une caractéristique d’accessibilité puissante de l’apprentissage en ligne. Ils permettent aux concepteurs et aux conceptrices de fournir des itinéraires alternatifs, des explications alternatives et des médias alternatifs.

Les liens doivent être facilement identifiables. Faites en sorte que vos liens soient faciles à trouver sur la page grâce à un bon CSS, par exemple en les soulignant et en les différenciant suffisamment du texte normal.

En règle générale, le texte d’un lien doit décrire la destination du lien, par exemple, s’il mène à un fichier, il doit décrire ce fichier. L’utilisateur doit savoir si le lien est pertinent à partir du seul texte du lien. Évitez d’utiliser l’URL de destination comme texte du lien, ainsi que les expressions “Cliquez ici” ou “Téléchargez ici”, etc.

Essayez d’éviter d’ouvrir vos liens dans une “nouvelle fenêtre”, ou alors prévoyez un avertissement dans le texte du lien pour prévenir qu’il s’ouvre dans une nouvelle fenêtre afin d’éviter toute confusion.

Si des images sont utilisées comme hyperliens, assurez-vous que les personnes qui ne peuvent pas voir l’image peuvent quand même savoir si elles veulent cliquer sur le lien ce qu’il représente.

image de post-it avec le texte : À retenir !

Conseils pour les liens.

  • Identifiable en tant que lien avec du CSS.
  • Descriptions des liens :
    • Évitez l’URL comme texte du lien.
    • Eviter les ”Cliquer ici”.
  • Évitez d’ouvritr le lien dans une ”Nouvelle fenêtre” sans avertissement.
  • Image en tant que lien, alors les données alt décrivent la destination du lien.

Les tableaux.

Exemple de tableau de données

Déjà, veillez à n’utiliser que des données présentées sous forme de tableaux et à ne pas utiliser des tableaux pour la mise en page.

Sans oublier d’ajouter des légendes pour présenter le contenu de vos tableaux, sauf si le contenu est très bref et simple.

De plus, veillez à incorporer des en-têtes de ligne et de colonne. On trouve souvent des tableaux dont la ligne supérieure est colorée et en gras, ce qui n’est qu’un effet visuel. Les tableaux ont besoin d’en-têtes de ligne et de colonne correctement balisés pour être accessibles.

Mais aussi, essayez d’éviter d’utiliser des cellules fusionnées. N’utilisez pas de cellules fusionnées pour donner au contenu un aspect cool. Elles perturbent le flux logique des cellules du tableau, lié aux lignes et aux colonnes.

de plus, évitez également les tableaux imbriqués. Les tableaux imbriqués rendent un site Web difficile à consulter pour tout le monde, mais surtout pour un lecteur d’écran.

Enfin, les tableaux sans balisage structurel permettant de différencier et de relier correctement les cellules d’en-tête et de données créent des obstacles à l’accessibilité. Il ne suffit pas de s’appuyer sur des repères visuels pour créer un tableau accessible.

image de post-it avec le texte : À retenir !

Conseils pour les tableaux.

  • Des données sous forme de tableaux uniquement.
    • Ne pas utiliser pour la mise en page.
  • Toujours avoir une légende.
  • Toujours avoir des en-têtes de ligne et de colonne.
  • Jamais de cellules fusionnées.
  • Jamais de tableaux fusionnés.

Les équations

Exemple d'équation

Déjà, l’utilisation d’équations dans du contenu pédagogique est un excellent moyen d’aider les apprenants.

Toutefois, lorsque vous affichez des équations, évitez d’utiliser des images d’équations !

Alors, il est vraiment important d’utiliser des affichages d’équations accessibles, ce qui peut parfois être difficile.

Enfin, il existe des outils faciles à utiliser, comme MathJax, qui vous aideront à ajouter des équations pour améliorer votre contenu et le rendre accessible.

Spécialement avec Moodle, la création d’équations de l’éditeur Atto est entièrement accessible aux apprenants tout en étant visuellement précise pour l’apprenant. Il utilise MathJax.

De plus, il existe également un plugin externe pour Moodle appelé WIRIS – MathType. Il permet de taper et d’écrire à la main des notations mathématiques dans Moodle.

Enfin, MathJax est un projet open source de pointe et il fonctionne avec les lecteurs d’écran et permet le zoom d’expression et l’exploration interactive. Alors, les utilisateurs peuvent également copier des équations dans Office, LaTeX, des wikis et d’autres logiciels.

image de post-it avec le texte : À retenir !

Conseils pour les équations.

  • Ne pas utiliser des images d’équations.
  • Utiliser des éditeuyrs d’équations accessibles.
    • L’éditeur d’équations de Atto (Mathjax).
      • Il est riche en fonctionnalités.
      • Il donne de belles apparences.
      • Il est entièrement accessible.
    • Des éditeurs d’équations utilisant Mathjax.
    • L’éditeur Wiris.

Avec Moodle

Exemple de rangement avec des étagères.

Déjà, pensez à tous les utilisateurs qui effectuent des tâches ou lisent du contenu sur Moodle. Il y a un certain nombre de couches différentes qui doivent être prises en compte.

  • Tout d’abord, il y a le ou les appareils utilisés.
  • Puis, il y a le navigateur ou l’application mobile qui est utilisé.
  • Bien que nous ne puissions pas garantir que tous les utilisateurs et utilisatrices aient un accès égal aux appareils les plus récents, la structure du contenus mis à disposition est la partie que Moodle contrôle et il est très important de s’assurer qu’elle est solide et accessible.
  • Ensuite, il y a le thème graphique. Moodle fournit un thème basé sur les standards de l’industrie. Alors, l’accessibilité est dans son cœur. Il est possible de faire des choses plus ”sexy” avec les thèmes graphiques.
  • De plus, la configuration du site est la façon dont Moodle lui-même est mis en place par l’administrateur.
  • Ensuite vient la configuration des cours, et pour une navigation cohérente, elle inclut la convivialité, l’accessibilité et les conventions de nommage.
  • Sans oublier que le contenu des enseignant·e·s, est parfois de plusieurs dizaines de fichiers .pdf. Il doit être pris en compte également. Cela montre la nécessité d’une formation à l’accessibilité pour les enseignant·e·s et les autres concepteurs de Moodle afin de garantir un contenu accessible.
  • Enfin, le contenu des étudiant·e·s est comme une cerise sur un gâteau. Le retour d’information des étudiant·e·s est important, donc encouragez les forums et autres modes de communications et prennez en compte le retour d’information des étudiants sera la dernière étape pour assurer une prestation efficace de l’apprentissage en ligne.

En résumé, nous avons réparti ces différents éléments de la conception les domaines correspondants de Moodle : HTML, fichiers, structure générale, navigation, architecture, design, paramètres et fonctionnalités.

image de post-it avec le texte : À retenir !

Conseils pour la conception Moodle.

Quel élément de votre formation en ligne et comment faire pour la rendre accessible :

  • Les contenus pour les apprenant·e·s ➡️ du HTML et des fichiers.
  • Les contenus des concepteurs et conceptrices pédagogiques ➡️ du HTML et des fichiers.
  • La configuration des cours ➡️ de l’architecture et de la conception.
  • La navigation dans le site Moodle ➡️ du nommage et de la structure.
  • La configuration du site Moodle ➡️ du nommage et de la structure.
  • Le thème graphique ➡️ de la navigation et de l’image de marque.
  • Les navigateurs et/ou l’App mobile ➡️ les réglages et les fonctionnalités.
  • Les appareils ➡️ les réglages et les fonctionnalités.

Sources : webinar Brickfield pendant le GAAD 2020