Chapitre 12.3 — Créer du contenu accessible

⏱️ TL;DR — C’est la couche 2, celle où se perd le plus d’accessibilité. Créer un cours accessible tient à quelques réflexes que le formateur doit acquérir et que le dev doit outiller : utiliser les vrais niveaux de titres (jamais du gras pour « faire un titre »), donner un alt utile aux images, écrire des intitulés de liens explicites, respecter le contraste, structurer les tableaux de données avec des en-têtes, et lancer le vérificateur intégré avant de publier. Ce chapitre te donne la matière pour former les formateurs — avec, en prime, une checklist réutilisable.

🎯 Objectifs

• Lister les réflexes de création d’un cours accessible dans l’éditeur.
• Comprendre pourquoi un faux titre en gras casse la navigation.
• Écrire des alt et des intitulés de liens utiles.
• Structurer des tableaux de données corrects.
• Disposer d’une checklist pour former et outiller les formateurs.

Le formateur crée l’interface (sans le savoir)

Quand un formateur tape un cours dans l’éditeur, il produit du HTML. Il ne le voit pas, mais chaque choix — « je mets ce titre en gras », « je colle cette image », « je fais un lien En savoir plus » — génère du balisage que le lecteur d’écran va exploiter. Le formateur est donc, sans le savoir, en train de coder l’interface pour les apprenants handicapés. Ton travail de dev-expert, c’est de lui donner les bons réflexes sans le noyer sous la technique.

1. De vrais titres, pas du gras

Le réflexe numéro un. Dans l’éditeur, il faut choisir un niveau de titre (Titre 2, Titre 3…) dans le menu de format, et jamais simuler un titre en mettant du texte en gras et en plus grand.

<!-- ❌ Faux titre : visuellement gros, mais sémantiquement du simple texte -->
<p><strong><span style="font-size:1.5em">Module 1 : les fondamentaux</span></strong></p>
 
<!-- ✅ Vrai titre : niveau annoncé, navigable au lecteur d'écran -->
<h2>Module 1 : les fondamentaux</h2>

Pourquoi c’est capital : un utilisateur de lecteur d’écran navigue de titre en titre pour se repérer dans un cours (touche de raccourci pour lister les titres). Un faux titre en gras n’apparaît nulle part dans cette liste — le cours devient un mur de texte impossible à parcourir. On développe la mécanique en Partie 3 — HTML sémantique.

⚠️ Piège — Le faux titre en gras est *l’*erreur reine des LMS. Elle est d’autant plus vicieuse qu’à l’écran, le résultat est identique : gros, gras, on dirait un titre. La différence est invisible pour le formateur voyant et radicale pour l’apprenant aveugle. Règle simple à transmettre : « pour faire un titre, on utilise le menu Titre, jamais le bouton gras ». Le gras sert à mettre un mot en emphase dans une phrase, pas à structurer.

2. Un alt utile sur les images

Chaque image porteuse d’information a besoin d’un texte alternatif qui décrit ce qu’elle apporte, pas son nom de fichier. L’éditeur de Moodle propose un champ de description au moment d’insérer l’image (et une case « image décorative » pour les images purement esthétiques, qui reçoivent alors un alt vide).

• Image utile → alt qui transmet l’information (« Schéma : le cycle de l’eau en quatre étapes »).
• Image décorative → cocher « décorative » → alt="" (le lecteur d’écran l’ignore).
• Jamais de alt du type « image », « photo », ou le nom de fichier.

On traite le sujet en profondeur en Partie 8 — Images & média.

3. Des intitulés de liens explicites

Un lien doit avoir un sens hors contexte, car les utilisateurs de lecteur d’écran listent souvent les liens d’une page en bloc.

<!-- ❌ Hors contexte, ces liens ne veulent rien dire -->
Pour le programme, <a href="/prog.pdf">cliquez ici</a>.
Pour les modalités, <a href="/modalites">En savoir plus</a>.
 
<!-- ✅ L'intitulé porte le sens -->
Consulte le <a href="/prog.pdf">programme de la formation (PDF)</a>.
Découvre les <a href="/modalites">modalités d'inscription</a>.

Règle à transmettre : « En savoir plus » et « Cliquez ici » sont interdits. L’intitulé doit dire où on va.

4. Le contraste

Les formateurs adorent colorer le texte (rouge « important », gris clair pour une note). Rappelle-leur que la couleur doit contraster suffisamment avec le fond (ratio AA), et qu’elle ne doit jamais être le seul indicateur (« les mots en rouge sont à retenir » est inaccessible pour un daltonien). Détails en Partie 7 — Texte, couleur & contraste.

5. Des tableaux de données corrects

Un tableau de données (pas de mise en page) doit avoir de vraies cellules d’en-tête, pour que le lecteur d’écran annonce « colonne Note, ligne Module 2 : 14/20 ».

<!-- ✅ En-têtes déclarés : chaque cellule est située par le lecteur d'écran -->
<table>
  <caption>Notes par module</caption>
  <thead>
    <tr><th scope="col">Module</th><th scope="col">Note</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Module 1</th><td>16/20</td></tr>
    <tr><th scope="row">Module 2</th><td>14/20</td></tr>
  </tbody>
</table>

L’éditeur de Moodle permet de définir les en-têtes de tableau : c’est un réflexe à montrer aux formateurs qui créent des grilles de notes ou des plannings.

6. Lancer le vérificateur avant de publier

Dernier geste : cliquer sur le vérificateur d’accessibilité de l’éditeur avant de valider (voir 12.2). Il n’attrape pas tout, mais il rattrape les oublis grossiers (alt manquant, contraste faible, titre sauté). En faire une habitude systématique change déjà énormément le niveau moyen des cours.

Checklist « cours accessible » (à donner aux formateurs)

Une checklist courte, à afficher ou intégrer au processus de publication :

• Les titres utilisent le menu Titre (Titre 2, Titre 3…), jamais du gras agrandi.
• La hiérarchie des titres est logique (pas de saut de Titre 2 à Titre 4).
• Chaque image utile a un alt descriptif ; les images décoratives sont marquées comme telles.
• Les liens ont des intitulés explicites (pas de « cliquez ici »).
• Le contraste texte/fond est suffisant ; la couleur n’est jamais le seul indicateur.
• Les tableaux de données ont des en-têtes (<th>) et, si utile, un caption.
• Les abréviations et le jargon sont explicités au moins une fois.
• Le vérificateur d’accessibilité a été lancé et ses alertes traitées.
• Les documents et vidéos déposés sont accessibles (voir 12.4 et 12.5).

💡 Réflexe — Ne forme pas les formateurs à « l’accessibilité » en abstrait : ils décrochent. Forme-les à cinq gestes concrets (vrais titres, alt, liens explicites, contraste, vérificateur) et donne-leur la checklist. Le geste ancré vaut mieux que la théorie oubliée.

🧭 Sur A11yLearn — Chez A11yLearn, on a transformé cette checklist en gabarit de cours pré-structuré (titres de niveau déjà en place, emplacements d’images avec rappel du champ alt) et en mini-atelier de 45 minutes pour les nouveaux formateurs. Depuis, les faux titres en gras ont quasi disparu de la couche 2 — parce qu’on a rendu le bon geste plus facile que le mauvais.

✏️ Exercices

Exercice 1 — Corrige le faux titre. Un formateur t’envoie ce contenu d’éditeur. Qu’est-ce qui cloche, et comment le corriger ?

<p><strong>Partie A — Introduction</strong></p>
<p>Bienvenue dans ce module...</p>
<p><span style="color:#bbbbbb">Note : durée estimée 2h</span></p>

Exercice 2 — Répare les liens. Réécris ces deux liens pour qu’ils aient du sens hors contexte : « Le support de cours est disponible, cliquez ici. Pour vous inscrire à la session, en savoir plus. »

🧠 Quiz de révision

Chapitre suivant : Documents accessibles (PDF, Office) — la couche la plus souvent oubliée.