Chapitre 12.5 — Média pédagogique

⏱️ TL;DR — La formation en ligne repose beaucoup sur la vidéo, or une vidéo sans sous-titres exclut les personnes sourdes, et sans transcription elle est difficile à réviser pour beaucoup. Les sous-titres auto-générés sont un point de départ, jamais un point d’arrivée : ils doivent être relus et corrigés (l’automatique se trompe sur les termes techniques et la ponctuation). Diapositives, quiz et contenus interactifs (H5P) ont aussi leurs exigences. L’accessibilité du média pédagogique est souvent ce qui décide de la conformité réelle d’un cours.

🎯 Objectifs

• Sous-titrer et transcrire correctement une vidéo de cours.
• Comprendre pourquoi l’auto-génération ne suffit pas.
• Rendre accessibles diapositives et contenus interactifs.
• Situer les responsabilités entre plateforme, formateur et dev.

La vidéo de cours : sous-titres + transcription

Une vidéo pédagogique porte de l’information par l’image et par le son. Deux alternatives sont donc nécessaires (voir vidéo & audio) :

• Les sous-titres synchronisés : le texte des dialogues et des sons signifiants, calé sur la vidéo. Indispensable pour les personnes sourdes ou malentendantes — et utile à tous (bruit, révision, langue). Techniquement, un fichier .vtt associé via l’élément <track>, ou les sous-titres du lecteur de la plateforme.
• La transcription : le texte intégral, consultable indépendamment. Précieuse pour réviser, chercher un passage, ou pour une personne sourde-aveugle (via braille). Pour une vidéo, une transcription enrichie décrit aussi l’essentiel visuel.
• L’audiodescription si des informations importantes sont uniquement visuelles (un schéma montré sans être commenté à l’oral). Le meilleur remède reste de commenter à voix haute ce qu’on montre, dès l’enregistrement.

<video controls>
  <source src="cours-react-01.mp4" type="video/mp4" />
  <track kind="subtitles" src="cours-react-01.fr.vtt" srclang="fr" label="Français" />
</video>

L’auto-génération ne suffit pas

Les outils de sous-titrage automatique (et ceux intégrés aux plateformes vidéo) ont beaucoup progressé, mais ils se trompent — surtout sur le vocabulaire technique (useEffect, aria-label, noms propres), la ponctuation et les passages bruités. Des sous-titres faux sont parfois pires que pas de sous-titres, car ils induisent en erreur.

Le bon flux : auto-générer pour dégrossir, puis relire et corriger humainement. C’est rapide sur une vidéo courte, et c’est ce qui distingue un contenu « techniquement sous-titré » d’un contenu réellement utilisable.

⚠️ Piège — Cocher « sous-titres automatiques activés » et considérer la vidéo conforme. Sur un cours technique, l’auto se trompe précisément sur les mots qui comptent (les termes du domaine). La relecture n’est pas optionnelle : sans elle, le sous-titrage donne une fausse impression de conformité.

Diapositives, quiz et contenus interactifs

• Diapositives : mêmes règles que les documents (12.4) — ordre de lecture, alternatives d’images, contraste, ne pas tout miser sur le visuel. Fournir la version texte/transcription.
• Quiz et activités : énoncés clairs, réponses atteignables au clavier, retours d’erreur explicites (mêmes principes que les formulaires), pas de limite de temps stricte sans alternative.
• Contenus interactifs (H5P, etc.) : le niveau d’accessibilité varie selon le type d’activité. Certains sont bien pensés, d’autres non. Il faut vérifier au clavier et au lecteur d’écran chaque type utilisé, et éviter ceux qui excluent (glisser-déposer sans alternative, par exemple — voir les gestes).

💡 Réflexe — Pour tout média pédagogique, pose-toi : « si je coupe le son, est-ce compréhensible ? si je masque l’image, est-ce compréhensible ? ». Si la réponse est non à l’une des deux, il manque une alternative (sous-titres, transcription, audiodescription ou commentaire oral).

Qui fait quoi

L’accessibilité du média se répartit : la plateforme (dev) fournit un lecteur accessible et le support des pistes .vtt ; le formateur produit sous-titres relus, transcriptions et commente ce qu’il montre ; l’organisation met en place le processus (temps, outils, contrôle). Le dev outille et forme ; il ne peut pas tout porter seul.

🧭 Sur A11yLearn — Chaque vidéo de cours d’A11yLearn suit désormais un pipeline : enregistrement (en commentant à voix haute ce qui est à l’écran) → sous-titres auto → relecture des termes techniques → export .vtt → transcription publiée sous la vidéo. Les activités H5P sont testées au clavier avant publication ; celles qui échouent sont remplacées par une alternative accessible.

✏️ Exercices

Exercice 1 — Le sous-titre automatique. Une vidéo « Introduction à React » a des sous-titres auto qui écrivent « you se fête » pour « useEffect ». Pourquoi est-ce un problème et que fais-tu ?

Exercice 2 — Le schéma commenté. Dans une vidéo, le formateur montre un schéma d’architecture en disant « comme vous le voyez ici ». Qu’est-ce qui manque et comment corriger ?

🧠 Quiz de révision

Partie suivante : Mobile, responsive & mouvement — les exigences propres au tactile, au zoom et aux animations.