module_02 — intermédiaire

Accessibilité
Web

Le web est fait pour tout le monde. Découvrez pourquoi l'accessibilité est une obligation légale, une nécessité éthique — et un avantage concurrentiel pour vos projets.

15%
de la population mondiale en situation de handicap
96%
des sites web présentent des erreurs d'accessibilité détectables
RGAA
Référentiel français obligatoire pour les services publics
⚖️
Obligation légale
En France, la loi impose l'accessibilité aux services publics et aux entreprises de +250 salariés.
👁️
Déficiences visuelles
Cécité, malvoyance, daltonisme — autant de profils qui dépendent d'un code accessible.
⌨️
Navigation clavier
De nombreux utilisateurs ne peuvent pas ou ne veulent pas utiliser une souris.
📈
SEO & performance
Un HTML sémantique et bien structuré améliore aussi votre référencement naturel.
// leçon_01

Les standards WCAG

Web Content Accessibility Guidelines — le référentiel international

Les WCAG (prononcez « wee-kag ») sont les directives internationales d'accessibilité publiées par le W3C. Elles s'organisent autour de 4 principes fondamentaux, souvent mémorisés sous l'acronyme POUR :

P
Perceptible
L'information doit être présentable de façons alternatives. Exemple : texte alternatif pour les images.
O
Opérable
L'interface doit être utilisable avec un clavier, sans contrainte de temps.
U
Understandable
Le contenu et l'interface doivent être compréhensibles. Langue déclarée, messages d'erreur clairs.
R
Robuste
Le contenu doit être interprétable par les technologies d'assistance (lecteurs d'écran).
ℹ️
Les WCAG définissent 3 niveaux de conformité : A (minimum), AA (standard recommandé — le plus couramment exigé), et AAA (excellence, difficile à atteindre globalement).
// leçon_02

Bonnes pratiques

Les erreurs les plus fréquentes et comment les corriger

1. Textes alternatifs sur les images

Chaque image porteuse de sens doit avoir un attribut alt descriptif. Les images décoratives doivent avoir alt="" (vide).

✗ <img src="logo.png"> ✗ <img src="photo.jpg" alt="image"> ← trop vague ✓ <img src="logo.png" alt="Logo de l'entreprise FormaPro"> ✓ <img src="deco.svg" alt="" role="presentation">

2. Contraste des couleurs

Le ratio de contraste entre le texte et son fond doit être d'au moins 4.5:1 pour un texte normal (niveau AA). Utilisez l'outil en ligne Colour Contrast Analyser pour vérifier.

⚠️
Un texte gris clair sur fond blanc peut vous sembler lisible — mais il sera illisible pour une personne malvoyante. Testez toujours avec un outil de mesure.

3. Labels sur les formulaires

✗ <input type="text" placeholder="Votre nom"> ← le placeholder disparaît à la saisie ✓ <label for="nom">Votre nom</label> <input type="text" id="nom" name="nom">
✅
Règle simple : si vous fermez les yeux et naviguez uniquement au clavier et avec un lecteur d'écran (NVDA est gratuit), est-ce que votre site reste utilisable ? Si oui, vous êtes sur la bonne voie.
// quiz_final

Validation

3 questions pour confirmer vos acquis

— / 3

Module terminé !

Vous comprenez maintenant les fondements de l'accessibilité web : les WCAG, leurs 4 principes POUR, et les erreurs les plus courantes à éviter.