Astuces et bonnes pratiques pour rendre un cours plus accessible - Université de Lorraine
Avant tout, nous souhaitons remercier chaleureusement l'équipe de l'Université de Lorraine notamment Thomas Fradet pour ce partage d'astuces en accessibilité pour la phase d'intégration d'un MOOC.
L'ensemble des éléments se trouvent sur le cours "Verdun d'hier à aujourd'hui". Les différentes icônes que vous verrez au sein de cet article ne sont pas en accès libre, ils servent d'exemple et d'inspiration. C'est pour cette raison qu'ils ne sont pas mis à disposition en téléchargement en pièce jointe de cet article.
Ces différentes astuces sont groupées par sujet.
A. Entêtes de page
Pour les entêtes de page, l'équipe a utilisé un code HTML simple qui se base sur une image en forme de bandeau et un titre. Le style appliqué sert principalement à s'intégrer d'une meilleure manière à la page. Il faut passer en vue apprenant pour voir le résultat.
Voici le code à utiliser (sans mise en forme) :
<div style="border-bottom: 2px solid #4e4e4e; margin-bottom: -16px;">
<img src="/static/bandeau.jpg" style="width: 100%; height: auto; display: block;">
<div style="padding: 1rem 0 1rem 0;">
<div style="width: 10%;display: inline-block;">
<img src="/static/icon-play-movie.svg" alt="Ressource de cours vidéo">
</div>
<div style="width: calc(89% - 1rem);display: inline-block;vertical-align: middle;margin-left: 1rem;">
<h1 style="color: #4e4e4e;font-variant: small-caps;display: inline;">Verdun et les Verdunois dans l’immédiat après-guerre - Partie 1/2</h1>
</div>
</div>
</div>Voici un exemple du rendu en image ci-dessous :
exemple_entête
Ce code a été copié/collé sur chaque page du cours, tout en prenant bien soin de remplacer le titre à chaque fois. Par ailleurs pour chaque type de ressource, il sera nécessaire de changer l'icône (l'image) au sein du code afin que cela corresponde à la ressource se trouvant sur l'unité/page.
B. Encart spécifique
Pour les évaluations, un encart de couleur (il sera nécessaire de bien faire attention au contraste entre le fond et la police de caractère) a été utilisé pour expliquer le fonctionnement des boutons de validation de la plateforme.
Voici le code à utiliser (sans mise en forme) :
<style>kbd.ul {font-family: inherit;border: 1px solid white;padding: 0 0.5rem;border-radius: 0.15rem;}</style>
<div style="border: 1px solid #9a0007;">
<div style="background-color: #9a0007; padding: 1rem">
<h2 style="color: white;font-size: 1.5rem; line-height: 1;padding: 0; margin: 0;">Evaluation</h2>
</div>
<div style="background-color: #d32f2f ; padding: 1rem">
<p style="color: white; padding: 0; margin: 0 0 0.5rem 0;">Ceci est une évaluation notée. La note obtenue compte pour l'obtention de l'attestation de participation avec succès. Rendez-vous dans le menu Progression pour voir vos scores.</p>
<p style="color: white; padding: 0; margin: 0 0 0.5rem 0;">Attention : vous n'avez qu'un seul essai. </p>
<ul style="color: white; padding-left: 2em;">
<li>Utilisez le bouton <kbd class="ul">Enregistrer</kbd> pour enregistrer vos réponses et continuer l'évaluation plus tard. </li>
<li>Utilisez le bouton <kbd class="ul">Vérification finale</kbd> pour soumettre <u>définitivement</u> vos réponse : une seule et unique soumission possible.</li>
</ul>
</div>
</div>Voici un exemple du rendu en image ci-dessous :
C. Cartouche de bas de page pour le téléchargement
Dans l'objectif de rendre plus saillants les éléments téléchargeables en fin de page. Il est possible de mettre en place un cartouche.
Voici le code à utiliser (sans mise en forme)
<div style="border-bottom: 2px solid #4e4e4e; margin-bottom: -16px; border-top: 2px solid #4e4e4e; margin-top: -16px;">
<div style="padding: 1rem 0 1rem 0;">
<div style="width: 10%;display: inline-block;">
<img src="/static/icon-save.svg">
</div>
<div style="width: calc(89% - 1rem);display: inline-block;vertical-align: middle;margin-left: 1rem;">
<div style="color: #4e4e4e;display: inline;">
<p style="margin: 0;"><svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 0.5rem;width: 1.5rem;" width="1.5rem" height="1rem" viewBox="0 0 9 6"><desc>Drapeau Allemand</desc><rect id="black_stripe" width="3" height="9" y="0" x="0" fill="#ED2939"/><rect id="red_stripe" width="3" height="9" y="0" x="3" fill="#fff"/><rect id="gold_stripe" width="3" height="9" y="0" x="6" fill="#002395"/></svg><a href="/static/S1C3_cochet-texte_FR.pdf" target="_blank">Télécharger la transcription en français</a></p>
<p style="margin: 0;"><svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 0.5rem;width: 1.5rem;" width="1.5rem" height="1rem" viewBox="0 0 9 6"><desc>Drapeau Allemand</desc><rect id="black_stripe" width="9" height="2" y="0" x="0" fill="#000"></rect><rect id="red_stripe" width="9" height="2" y="2" x="0" fill="#D00"></rect><rect id="gold_stripe" width="9" height="2" y="4" x="0" fill="#FFCE00"></rect></svg><a href="/static/S1C3_cochet-texte_DE.pdf" target="_blank">Télécharger la transcription en allemand</a></p>
</div>
</div>
</div>
</div>Voici un exemple du rendu en image ci-dessous :
D. Calendrier en couleur partie "infos du cours"
Le calendrier du MOOC est un des éléments essentiels pour permettre aux apprenants de pouvoir organiser leur travail. La mise en place de ce calendrier, par exemple au niveau de la page infos du cours, en utilisant un code couleur significatif est intéressant.
Voici le code à utiliser (sans mise en forme) :
<div lang="fr" style="width: 100%;background-color: #ffffff;position: relative;left: -30px;padding: 20px 30px 0 30px;height:100%;">
<ul style="border: none;background-color: #ffffff;">
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid green;">Semaine 1 : <strong>11 novembre</strong></li>
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid green;">Semaine 2 : <strong>19 novembre</strong></li>
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid green;">Semaine 3 : <strong>26 novembre</strong></li>
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid green;">Semaine 4 : <strong>3 décembre</strong></li>
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid #F44336;margin-top:5px;">Fin des inscriptions : <strong>13 décembre</strong></li>
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid #F44336;">Date limite de rendu des évaluations : <strong>16 décembre</strong></li>
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid #333333;margin-top:5px;">Fin du cours : <strong>18 décembre</strong> </li>
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid #333333;">Disponibilité des attestations : dès que possible, un mail sera envoyé</li>
<li style="padding: 3px 5px;line-height: 1.5em;border-left:4px solid #333333;">Fermeture du cours et des forums : <strong>21 décembre</strong> </li>
</ul>
</div>Voici un exemple du rendu en image ci-dessous :