Comprendre et appliquer la norme WCAG en formation professionnelle

Guide complet pour les CFA, OFA et organismes de formation

Objectif de l’article

La norme WCAG (Web Content Accessibility Guidelines) est le référentiel international de référence pour garantir l’accessibilité des contenus numériques. Reconnue par la plupart des législations (dont le RGAA en France), elle est incontournable pour les organismes de formation professionnelle qui créent des sites web, plateformes LMS, documents ou supports pédagogiques numériques.

Ce guide vous aide à comprendre les WCAG 2.1, mettre en œuvre leurs principes, et adapter votre activité pour produire des contenus réellement accessibles au quotidien.

1. Qu’est-ce que la norme WCAG ?

Les WCAG sont des directives publiées par le W3C (World Wide Web Consortium) à travers son initiative WAI (Web Accessibility Initiative). Elles visent à rendre le web perceptible, utilisable, compréhensible et robuste pour tous, y compris les personnes en situation de handicap.

Les différentes versions

• WCAG 1.0 (1999) – obsolète aujourd’hui.
  
• WCAG 2.0 (2008) – toujours en vigueur, mais dépassée.
  
• WCAG 2.1 (2018) – version la plus utilisée actuellement, intégrée dans le RGAA.
  
• WCAG 2.2 (2023) – publiée récemment, avec des critères supplémentaires.
  
• WCAG 3.0 (en projet) – repensée pour être plus inclusive, mais encore en phase expérimentale.
  

Les niveaux de conformité

Chaque critère WCAG peut être respecté selon trois niveaux :

• A : accessibilité minimale,
  
• AA : standard courant (niveau exigé en France par le RGAA),
  
• AAA : accessibilité renforcée (souhaitable, mais rarement obligatoire).
  

Ciblez en priorité le niveau AA, qui constitue un socle d’accessibilité solide pour vos contenus pédagogiques numériques.

2. Les 4 principes fondamentaux des WCAG

La norme repose sur 4 principes clés, à mémoriser via l’acronyme POUR :

Perceptible

L’information et les composants de l’interface doivent être présentés à l’utilisateur de façon à être perçus.

Cela implique :

• Des contrastes de couleur suffisants,
  
• Des alternatives textuelles pour les images,
  
• Des sous-titres pour les vidéos,
  
• Une structure logique pour les lecteurs d’écran.
  

Utilisable

Les composants de l’interface et de navigation doivent pouvoir être utilisés via différents moyens.

Cela implique :

• Une navigation au clavier (TAB, flèches, Enter),
  
• Des commandes visibles au focus,
  
• L’absence de pièges ou blocages lors de la navigation.
  

Compréhensible

L’information et l’interface utilisateur doivent être compréhensibles.

Cela implique :

• Un langage clair et lisible,
  
• Une navigation cohérente d’une page à l’autre,
  
• Des formulaires bien étiquetés avec des messages d’erreur utiles.
  

Robuste

Le contenu doit pouvoir être interprété de manière fiable par une large variété d’agents utilisateurs, y compris les technologies d’assistance.

Cela implique :

• Un code HTML valide et sémantique,
  
• Des balises correctement fermées,
  
• Des balises ARIA bien utilisées.
  

2. Mettre en œuvre les critères WCAG 2.1 – Niveau AA

La norme WCAG 2.1 comprend 13 lignes directrices déclinées en 78 critères de succès (dont 50 pour le niveau AA). Voici les plus essentiels à appliquer dans vos outils de formation (site, plateforme, ressources numériques).

1.1.1 Texte alternatif (Niveau A)

Exigence : Toutes les images doivent avoir une description alternative pertinente (alt).

Exemples :

• Dans une activité Moodle contenant un schéma d’anatomie : ajoutez un alt= »Schéma du système digestif humain » dans l’image.
  
• Sur un site vitrine du CFA avec des pictogrammes : décrire leur fonction (ex. alt= »Lien vers les formations disponibles »).
  

Bonnes pratiques :

• Si l’image est décorative, utilisez alt= » ».
  
• Ne jamais commencer par « image de… », car les lecteurs d’écran l’indiquent déjà.
  

1.3.1 Informations et relations (Niveau A)

Exigence : Les relations entre les contenus doivent être claires et sémantiques.

Exemples :

• Utiliser des balises <h1> à <h4> pour structurer une page de cours Moodle.
  
• Dans un formulaire de contact, chaque champ doit être lié à son étiquette via <label for= »id »>.
  

1.4.3 Contraste des couleurs (Niveau AA)

Exigence : Le texte doit avoir un ratio de contraste d’au moins 4.5:1 par rapport à son arrière-plan.

Outil de test : WebAIM Contrast Checker

Exemples :

• Un bouton “Envoyer” blanc sur fond jaune : ❌ insuffisant.
  
• Le même bouton en bleu foncé sur fond blanc : ✅ conforme.
  

1.4.4 Redimensionnement du texte (Niveau AA)

Exigence : Le texte doit rester lisible à 200 % de zoom sans perte d’information ni défilement horizontal.

Exemples :

• Les pages du site doivent être responsive (via CSS ou thème adaptatif),
  
• Ne pas fixer de hauteur/largeur rigide en px pour les blocs de contenu.
  

2.1.1 Navigation clavier (Niveau A)

Exigence : Toutes les fonctionnalités doivent être accessibles au clavier seul.

Test :

• Naviguez sur votre site avec la touche TAB uniquement.
  
• Vérifiez que le focus est visible, que les menus sont accessibles et les champs activables avec Entrée.
  

Exemple : Sur une plateforme Moodle, l’apprenant doit pouvoir compléter un quiz sans souris.

2.4.4 Objectif du lien (Niveau A)

Exigence : Les liens doivent être compréhensibles hors contexte.

Mauvais exemple :  Cliquez ici
Bon exemple :  Découvrir nos formations en apprentissage

2.4.6 Titres et en-têtes (Niveau AA)

Exigence : Les pages doivent comporter des titres clairs et hiérarchisés.

Exemples :

• Page d’accueil : un <h1> pour le nom de la structure, des <h2> pour les sections comme « Nos formations », « Actualités ».
  
• Page de cours Moodle : un <h1> pour le nom du cours, des <h2> pour les sections ou semaines.
  

3.3.1 Identification des erreurs (Niveau A)

Exigence : Les erreurs dans les formulaires doivent être identifiées et décrites.

Exemple : Lors de l’inscription, si un email est invalide, affichez « L’adresse email saisie n’est pas valide », pas seulement une croix rouge.

4.1.2 Nom, rôle et valeur (Niveau A)

Exigence : Les composants interactifs (menus, onglets, carrousels…) doivent avoir un rôle et un état compréhensibles par les technologies d’assistance.

Exemples :

• Un onglet actif doit avoir aria-selected= »true »,
  
• Un bouton de menu doit être balisé <button aria-expanded= »false »>.

3. Implémenter les WCAG dans vos outils du quotidien

A. Sur votre site web institutionnel (WordPress, Joomla, CMS personnalisé)

À faire :

• Choisir un thème accessible (conforme WCAG AA ou RGAA),
  
• Structurer les pages avec <h1>, <h2>, etc. sans sauter de niveaux,
  
• Fournir un texte alternatif (alt) pour toutes les images,
  
• S’assurer que les liens ont un objectif explicite,
  
• Tester la navigation au clavier et le focus visuel,
  
• Vérifier le contraste avec un outil comme axe DevTools ou WAVE,
  
• Ajouter une page Accessibilité incluant :
  
  • le niveau visé (AA),
    
  • les actions entreprises,
    
  • une adresse de contact.
    

Astuce :

Utilisez l’extension WP Accessibility pour activer automatiquement certains réglages WCAG (focus, skip links, titre unique…).

B. Sur votre plateforme Moodle

Les recommandations ont déjà été détaillées dans l’article précédent, mais en résumé :

À vérifier :

• Utilisation correcte des titres (H1 > H2 > H3),
  
• Ajout de textes alternatifs aux images dans les ressources,
  
• Contraste suffisant dans les thèmes ou via CSS personnalisé,
  
• Navigation fluide au clavier dans les cours et les quiz,
  
• Accessibilité des documents et vidéos hébergés.
  

C. Dans vos documents PDF et PowerPoint

Pour les PDF :

• Ne pas faire de scan/image : utiliser des fichiers balisés,
  
• Créer le contenu dans Word ou LibreOffice avec :
  
  • styles de titres,
    
  • tableaux avec en-têtes,
    
  • texte alternatif pour les images,
    
• Exporter avec l’option « PDF balisé »,
  
• Tester avec PDF Accessibility Checker (PAC 3 ou 2021).
  

Pour les PowerPoint :

• Utiliser les modèles avec zones de titre, texte, image (éviter les glisser-déposer),
  
• Renseigner les Alt text pour toutes les images et graphiques,
  
• Respecter une hiérarchie visuelle claire,
  
• Ne pas abuser des animations ou transitions complexes,
  
• Utiliser le vérificateur d’accessibilité intégré (menu Révision > Vérifier l’accessibilité).
  

D. Pour vos vidéos pédagogiques (YouTube, PeerTube, captations internes)

À faire :

• Ajouter des sous-titres synchronisés : manuellement ou via outils automatiques (puis relecture),
  
• Fournir une transcription textuelle complète en pièce jointe ou dans le descriptif,
  
• S’assurer que le lecteur vidéo est accessible au clavier (boutons de lecture, pause, volume),
  
• Ajouter un script de description audio si la vidéo contient des éléments visuels essentiels.
  

Astuce :

YouTube propose un générateur de sous-titres automatiques que vous pouvez corriger manuellement (Menu Studio > Sous-titres).

E. Dans vos documents collaboratifs (Google Docs, Office 365, Canva…)

À vérifier :

• Utilisation des styles (Titre 1, Titre 2) pour structurer,
  
• Contraste suffisant dans les arrière-plans et polices,
  
• Description des images,
  
• Vérification avec les outils intégrés (Microsoft : Révision > Vérifier l’accessibilité).

4. Plan d’action pour atteindre la conformité WCAG

Ce plan est conçu pour être pratique, progressif et adapté à la réalité d’un organisme de formation, même sans service informatique dédié.

Étape 1 : Se former à l’accessibilité numérique

• Public ciblé : administrateurs, formateurs, responsables pédagogiques, référents handicap, community managers, chargés de communication.
  
• Actions :
  
  • Organiser une session de sensibilisation à l’accessibilité et aux WCAG,
    
  • Fournir un guide interne avec les bonnes pratiques (modèles accessibles, checklists, etc.),
    
  • Utiliser des supports adaptés (carte mentale, fiches mémo, e-learning).
    

Ressources :

• Tutoriel RGAA/WCAG d’Access42 : https://access42.net
  
• Mooc « Accessibilité numérique » de l’INRIA et la DINUM : Fun-MOOC Accessibilité
  

Étape 2 : Auditer l’existant

Outils à utiliser :

• axe DevTools, WAVE, Tanaguru, Asqatasun
  
• NVDA pour tester la navigation vocale
  
• PDF Accessibility Checker pour les fichiers
  
• Vérificateurs intégrés à Word, PowerPoint, Google Docs
  

Pages/éléments à auditer :

• Page d’accueil du site
  
• Page « formations » et pages de cours
  
• Formulaires (contact, candidature, inscription)
  
• Documents téléchargeables (PDF, PPT, Word)
  
• Modules Moodle utilisés
  
• Vidéos en ligne
  

Étape 3 : Corriger et outiller

• Corriger les contenus non conformes (images, liens, titres, contrastes…),
  
• Intégrer dans les outils internes :
  
  • Modèles Word / PPT accessibles,
    
  • Styles CSS conformes,
    
  • Plugins d’accessibilité (WP Accessibility, Brickfield Toolkit…),
    
• Documenter les pratiques pour pérenniser (Wiki interne, dossier partagé, FAQ accessibilité).
  

Étape 4 : Tester à chaque nouvelle publication

• Intégrer la vérification WCAG dans le processus de production :
  
  • Avant publication d’un article, d’un cours, d’une ressource : checklist express (Titres ? Alt text ? Contrastes ? Clavier ?),
    
• Utiliser les outils de vérification intégrés (dans Word, PowerPoint, Moodle, éditeurs web),
  
• Former les nouveaux collaborateurs à l’usage des gabarits conformes.
  

Étape 5 : Communiquer sur la démarche

• Créer une page Accessibilité sur le site, indiquant :
  
  • Le niveau visé (AA),
    
  • Les actions engagées,
    
  • Les points de contact en cas de difficulté,
    
  • Un lien vers le Défenseur des Droits.
    
• Inclure une mention dans vos supports :
  
  
  « Ce document a été conçu dans le respect des recommandations WCAG niveau AA. »

Conclusion

La norme WCAG 2.1 n’est pas une contrainte technique supplémentaire : c’est une opportunité de rendre la formation professionnelle plus inclusive, plus efficace et plus équitable.

Mettre en œuvre les WCAG permet :

• d’assurer l’accès à vos contenus aux apprenants en situation de handicap (visuel, moteur, auditif, cognitif, etc.),
  
• de respecter les obligations légales (notamment via le RGAA),
  
• d’améliorer la qualité pédagogique pour tous les utilisateurs, y compris ceux en situation de fatigue, de stress ou en mobilité.
  

C’est aussi un gage de sérieux et de professionnalisme vis-à-vis des financeurs publics, des partenaires et des familles.

Ce qui compte, ce n’est pas de viser une perfection inaccessible, mais d’engager une démarche continue, avec des outils simples, des méthodes claires et une mobilisation collective.

Appliquer WCAG au quotidien