Cet article à pour vocation de vous aider pour l'accessibilité numérique lors de l'intégration de contenus sur la plateforme.

L'initiative internationale pour l'accessibilité du Web (WAI) définit l'accessibilité du Web comme suit :

« L'accessibilité du Web signifie que les personnes en situation de handicap peuvent utiliser le Web. Plus précisément, qu'elles peuvent percevoir, comprendre, naviguer et interagir avec le Web, et qu'elles peuvent contribuer sur le Web. L'accessibilité du Web bénéficie aussi à d'autres, notamment les personnes âgées dont les capacités changent avec l'âge. L'accessibilité du Web comprend tous les handicaps qui affectent l'accès au Web, ce qui inclut les handicaps visuels, auditifs, physiques, de parole, cognitifs et neurologiques. »

Rédaction de texte

Nous vous recommandons de rédiger directement le texte sur la plateforme et de ne pas faire un copier-coller depuis un document Word. Le collage depuis un document type Word, rajoute des éléments indésirables au sein du code HTML, ce qui est un potentiel problème pour les apprenants utilisant une technologie d’assistance, type lecteur d’écran. Afin d’éviter ce désagrément, vous avez deux alternatives :

- Rédiger directement vos textes sur les composants de la plateforme, sans faire de copier-coller. Option que nous vous recommandons d'employer.

- Copier-coller le texte dans un outil de texte brut et sans mise en forme (exemple outil bloc-notes sur Windows) puis de recoller le texte (à partir du bloc-note) sur le composant de la plateforme. Cette pratique permet d’épurer le code et réduit la survenue des ajouts.

Cas des cours avec plusieurs langues : texte bilingue

Pour les cours proposant des textes ayant plusieurs langues sur une même page, il est nécessaire de déclarer la langue du texte dans le code. Faire cette précision dans le code permettra aux apprenants utilisant une technologie d’assistance, type lecteur d’écran que ce dernier lise le contenu avec la langue correspondante au texte. Dans le cas inverse, cela risque d'être incompréhensible pour l'apprenant.

Pour ce faire, on commencera par veiller à ce que chaque paragraphe ait un attribut "lang" soit présent. Mettons que le paragraphe ci-dessous sa langue soit le français, il faudra de déclarer ainsi dans le code : 

<lang="fr">

Ensuite, pour chaque contenu dont la langue diffère de celle indiquée sur l’élément racine ou paragraphe précédent, on va utiliser l’attribut "lang" pour indiquer le changement de langue. L’attribut peut être placé sur un élément qui existe déjà dans la structure HTML (un lien, un item de liste, un paragraphe, un titre…), ou bien on peut rajouter un élément <div> ou <span> pour englober le contenu dont on veut indiquer la langue:

  <blockquote>

  <p>

Je regarde un film d'horreur.

En le regardant je suis limite <span lang="en">nervous breakdown</span>.

  </p>

  <blockquote>

  <p>

  <cite lang="en">Blade Runner</cite> est une adaptation du roman et un film sortie en 1982.

  <cite lang="en">Do Androids Dream of Electric Sheep?</cite> de Philip K. Dick.

  </p>

  "<h2 lang="fr"><strong>Recherche sur les différentes pathologies<br /><span style="color:
  #3877bc;"><a href="#txtenglish" lang="en">Research on the various pathologies
  related to the sense of smell</a></span></strong></h2>"

Plus d'information sur ce sujet, veuillez consulter l'article du WACG : https://www.w3.org/International/questions/qa-html-language-declarations.fr  

Mettre à disposition des document à télécharger (pdf, transcription, etc.) 

Lorsque vous ajoutez un fichier en téléchargement au sein du cours,  sous la vidéo par exemple, si possible pouvez-vous indiquer la nature (format) et le poids du fichier. Voici un exemple illustratif :

Il s'agit d'information très utile pour les apprenants en situation de handicap utilisant une technologie d'assistance. Par ailleurs, pour réaliser des documents accessibles, nous vous recommandons la consultation de notre article sur le sujet : https://www.reseau-fun.help/hc/fr/articles/360000897197 

Contraste des couleurs

Pour déterminer si le contraste de couleur entre la police de caractère et le fond est conforme au ratio (4.5 minimum) demandé, je vous recommande d’utiliser cet outil : http://contrast-finder.tanaguru.com/?lang=fr

Insertion d'images

Pour les images, il est nécessaire de mettre une alternative, surtout si l'image véhicule une infirmation utile, voire indispensable à la compréhension. Il est donc important de décrire les images en mettant une alternative, notamment pour les apprenants utilisant un lecteur d’écran. En effet, la norme (RGAA, WCAG)  précise qu’il faut éviter que l’information ne soit donnée que par l’image en elle-même. Pour ce faire, il faut utiliser la balise "alt=" au sein du code. L’image ci-dessous illustre la balise au sein d'un code :

Il est nécessaire que l'alternative soit précise afin que l'apprenant puisse comprendre l'image sans pouvoir la voir. Pour l'exemple sur l'image, la description de l'attribut « alt » (choix d'avatar), permet de préciser la nature de l'image et l'information qu'elle véhicule. 

Pour les autres types d’images, ne véhiculant pas d'information indispensable à la compréhension, l’alternative n’est pas nécessaire. Il faut laisser l'attribut alt vide, comme ceci :  alt=""  

Iframe

L’iframe peut devenir assez ennuyeux pour les apprenants utilisant un lecteur d’écran. Si vous souhaitez intégrer des iframe au sein de votre cours, il est nécessaire de bien renseigner certains aspects du code. En effet, lors de l’utilisation de cadre en ligne (iframe) pour des vidéos ou des questionnaires par exemple, il est souhaitable de les identifier par un titre de cadre, ce qui permettra de se repérer plus facilement dans la structure de la page.

En somme, l’élément essentiel est de titrer le code, voici un exemple : <iframe src="https://www.exemple" allowfullscreen=""width="560" height="315" frameborder="0" title="Hangout 1 : questions stratégiques"></iframe> ou bien voici une autre méthode : <iframe title="exemple2"</iframe>. Il est donc nécessaire de mettre un titre à l’ensemble des iframe qui sont présents au sein du cours.

En complément, vous pouvez consulter cet article concernant les vidéos et sous-titres accessibles : https://www.reseau-fun.help/hc/fr/articles/360000737869

Page accessibilité

Au sein de votre cours, vous pouvez ajouter une page transmettant des informations à destination des apprenants sur le sujet de l'accessibilité. En effet, cette page vise à  guider les apprenants sur l'utilisation de votre cours et les informe sur les actions que vous avez réalisées dans le cadre de la production des contenus du cours.

Vous trouverez en pièce jointe de l'article le code (code-pageAN_simple) du modèle de cette page accessibilité que vous pourrez intégrer à votre cours, ainsi que sa bannière (banniere-a11y).

Pour l'intégration au sein du cours, veuillez utiliser une page statique (nommée "Accessibilité") afin d'obtenir le rendu suivant : 

Pour intégrer une page statique : 

1. Allez côté studio 
2. Cliquez sur "Contenu"
3. Sélectionnez "Pages" 
4. Cliquez sur le bouton vert "Nouvelle page" 

Pour nommer la page, cliquez sur "éditer" puis cliquez sur "paramètre", vous verrez le champ de saisie "Nom d'affichage". Remplacez "Empty" par "Accessibilité" par exemple.

• banniere-a11y.png200 ko
• code_pageAN_simple.html8 ko

Mise à jour 30 mai 2024 09:58