Accessibilité du Web pour tous

Les élèves retiennent mieux les normes d'accessibilité web quand ils vivent concrètement les obstacles et solutions. L'approche active transforme des concepts abstraits comme les contrastes ou la navigation au clavier en expériences tangibles et mémorables.

• Seconde
• SNT : Culture et Citoyenneté Numérique
• 4 activités
• 20 min–45 min

Objectifs d’apprentissage

1. Expliquer les principes fondamentaux de l'accessibilité web et leur rôle dans l'inclusion numérique.
2. Analyser comment les normes WCAG et RGAA contribuent à rendre le contenu web utilisable par des personnes ayant divers handicaps.
3. Identifier les éléments clés d'un site web accessible, tels que les textes alternatifs et les contrastes de couleurs.
4. Évaluer l'impact de l'accessibilité web sur l'expérience utilisateur globale, au-delà des personnes en situation de handicap.
5. Critiquer des exemples de sites web existants en identifiant les barrières potentielles à l'accessibilité.

Étude de cas

⏱ 30 min·Individuel

Hands-on Modeling : Naviguer sans souris

Les élèves doivent accomplir des tâches courantes (remplir un formulaire, consulter un article, naviguer dans un menu) en utilisant uniquement le clavier. Ils notent les obstacles rencontrés et les sites qui facilitent ou compliquent cette navigation.

Préparation et détails

Pourquoi l'accessibilité du Web est-elle considérée comme un enjeu à la fois technique, social et éthique ?

Conseil de facilitation: Pendant la navigation sans souris, circulez pour observer les stratégies des élèves et notez les difficultés récurrentes à discuter ensuite en groupe.

Setup: Groupes de travail en îlots avec dossiers documentaires

Materials: Dossier d'étude de cas (3 à 5 pages), Grille d'analyse méthodologique, Support de présentation des conclusions

• Analyser
• Évaluer
• Créer
• Prise de décision
• Autogestion

Cercle de recherche

⏱ 45 min·Petits groupes

Cercle de recherche: Audit d'accessibilité

Les groupes utilisent un outil en ligne (WAVE, Lighthouse) pour analyser l'accessibilité d'un site de leur choix. Ils classent les erreurs trouvées par gravité et proposent des corrections HTML et CSS concrètes.

Préparation et détails

Comment les normes d'accessibilité permettent-elles de rendre le Web utilisable par tous, indépendamment des handicaps ?

Conseil de facilitation: Pour l'audit d'accessibilité, fournissez une grille claire avec des critères mesurables et un exemple de site web à analyser pour guider leur travail.

Setup: Groupes en îlots avec accès aux ressources documentaires

Materials: Corpus de documents sources, Fiche de suivi du cycle de recherche, Protocole de formulation de questions, Canevas de présentation des résultats

• Analyser
• Évaluer
• Créer
• Autogestion
• Conscience de soi

Galerie marchande

⏱ 40 min·Petits groupes

Galerie marchande: Avant/après accessibilité

Chaque groupe modifie une page web pour corriger ses problèmes d'accessibilité (ajout d'alt, correction des contrastes, balisage sémantique). Les versions avant et après sont affichées côte à côte pour comparaison.

Préparation et détails

Dans quelle mesure les développeurs sont-ils responsables de l'accessibilité des sites qu'ils créent ?

Conseil de facilitation: Lors de la Gallery Walk, demandez aux groupes d'afficher leurs solutions à côté de leurs captures d'écran pour faciliter les comparaisons et les échanges.

Setup: Espace mural dégagé ou tables disposées en périphérie de la salle

Materials: Papier grand format ou panneaux d'affichage, Feutres et marqueurs, Post-it pour les retours critiques

• Comprendre
• Appliquer
• Analyser
• Créer
• Compétences relationnelles
• Conscience sociale

Penser-Partager-Présenter

⏱ 20 min·Binômes

Penser-Partager-Présenter: Le Web est-il vraiment pour tous ?

Les élèves réfléchissent aux types de handicaps concernés par l'accessibilité web (visuel, auditif, moteur, cognitif). Ils partagent leurs idées sur la responsabilité des développeurs et les limites du cadre réglementaire actuel.

Préparation et détails

Pourquoi l'accessibilité du Web est-elle considérée comme un enjeu à la fois technique, social et éthique ?

Conseil de facilitation: Pendant le Think-Pair-Share, insistez sur l'écoute active en demandant à chaque binôme de reformuler l'argument de l'autre avant de partager en grand groupe.

Setup: Disposition de classe standard ; les élèves se tournent vers leur voisin

Materials: Consigne de discussion (projetée ou distribuée), Optionnel : fiche de prise de notes pour les binômes

• Comprendre
• Appliquer
• Analyser
• Conscience de soi
• Compétences relationnelles

Enseigner ce sujet

Commencez par une démonstration rapide avec un lecteur d'écran pour montrer l'impact immédiat d'une image sans texte alternatif. Évitez de présenter les WCAG comme une liste de cases à cocher : privilégiez des exemples concrets qui créent un besoin de compréhension. Les débats sur la responsabilité de l'accessibilité web gagnent en profondeur quand les élèves confrontent leurs idées à des cas réels plutôt qu'à des théories.

À quoi s’attendre

Les élèves montrent leur compréhension en identifiant des problèmes d'accessibilité sur des sites réels, en proposant des corrections pertinentes et en expliquant pourquoi ces ajustements profitent à tous les utilisateurs. Ils justifient leurs choix avec des références aux critères WCAG.

Attention à ces idées reçues

Idée reçue courante

During Hands-on Modeling : Naviguer sans souris, certains élèves pensent que l'accessibilité ne concerne que les personnes aveugles.

Ce qu'il faut enseigner à la place

Pendant cette activité, observez les élèves essayer de remplir un formulaire ou de cliquer sur un menu déroulant sans souris. Remarquez que ceux qui ont des difficultés motrices ou qui utilisent un ordinateur avec un trackpad limité rencontrent les mêmes obstacles. Utilisez ces observations pour élargir la discussion aux handicaps temporaires ou situationnels.

Idée reçue courante

During Collaborative Investigation : Audit d'accessibilité, des élèves croient que rendre un site accessible demande beaucoup plus de travail et coûte cher.

Ce qu'il faut enseigner à la place

Pendant l'audit, utilisez des outils gratuits comme WAVE ou Lighthouse pour montrer que les problèmes majeurs (images sans texte alt, contrastes insuffisants) sont identifiés en quelques clics. Montrez comment les bonnes pratiques s'intègrent naturellement dans le développement : par exemple, ajouter un texte alternatif en même temps que l'image, ou vérifier les contrastes dès la phase de design.

Idées d'évaluation

Billet de sortie

After Hands-on Modeling : Naviguer sans souris, distribuez une fiche avec une capture d'écran d'un bouton de formulaire. Demandez aux élèves d'écrire une phrase expliquant comment rendre ce bouton accessible et pourquoi cela facilite la navigation pour tous, y compris pour une personne utilisant un clavier ou un lecteur d'écran.

Question de discussion

During Think-Pair-Share : Le Web est-il vraiment pour tous ?, lancez un débat en demandant aux élèves de défendre un point de vue avec des exemples concrets. Par exemple : 'Un designer argue que les couleurs vives améliorent l'engagement, mais cela exclut 4 % des utilisateurs. Qui a raison ?' Évaluez leur capacité à articuler des compromis entre design et accessibilité.

Vérification rapide

After Gallery Walk : Avant/après accessibilité, présentez une liste de 5 caractéristiques de sites web (ex : 'texte alternatif absent', 'contraste insuffisant', 'vidéo sans sous-titres'). Demandez aux élèves d'indiquer pour chacune si elle entrave l'accessibilité et de justifier leur réponse en citant un des critères WCAG 2.1.

Extensions et étayage

• Challenge : Demandez aux élèves de proposer une solution pour rendre un formulaire complexe accessible, en intégrant plusieurs critères WCAG (champs obligatoires, labels clairs, erreurs signalées).
• Scaffolding : Pour les élèves en difficulté, fournissez un site web très mal structuré et une liste de corrections prioritaires à appliquer en premier.
• Deeper exploration : Proposez aux élèves de comparer deux versions d'un même site, une conforme aux WCAG et une non conforme, et d'analyser l'impact sur l'expérience utilisateur.

Vocabulaire clé

Accessibilité web	Conception et développement de sites web de manière à ce que les personnes en situation de handicap puissent les percevoir, les comprendre, naviguer et interagir avec eux.
WCAG (Web Content Accessibility Guidelines)	Un ensemble de recommandations internationales pour rendre le contenu web plus accessible, servant de référence pour les normes d'accessibilité.
RGAA (Référentiel Général d'Amélioration de l'Accessibilité)	Le référentiel français qui définit les critères techniques d'accessibilité pour les services numériques, notamment ceux des administrations publiques.
Texte alternatif (texte alt)	Une description textuelle d'une image ou d'un autre élément non textuel, lue par les technologies d'assistance comme les lecteurs d'écran.
Lecteur d'écran	Un logiciel qui interprète le contenu d'un écran d'ordinateur et le présente à l'utilisateur sous forme vocale ou braille.