Accessibilite Web
Qu'est-ce que l'accessibilite web ?
L'accessibilite web consiste a concevoir des sites et applications web utilisables par toutes les personnes, y compris celles en situation de handicap. C'est un enjeu majeur : environ 15% de la population mondiale vit avec une forme de handicap.
Le saviez-vous ? L'accessibilite beneficie a tous ! Les sous-titres aident aussi les personnes dans des environnements bruyants, et une bonne lisibilite facilite la lecture sur mobile.
Pourquoi c'est important ?
de personnes handicapees dans le monde
de Francais en situation de handicap
des hommes sont daltoniens
Les differents types de handicaps
Visuel
Cecite, malvoyance, daltonisme
Solutions : Textes alternatifs, contraste eleve, agrandissement
Auditif
Surdite, malentendance
Solutions : Sous-titres, transcriptions textuelles
Moteur
Difficultes de manipulation
Solutions : Navigation clavier, zones cliquables larges
Cognitif
Dyslexie, troubles attention
Solutions : Langage simple, mise en page claire
Les 4 principes WCAG (POUR)
Les WCAG (Web Content Accessibility Guidelines) sont les regles internationales d'accessibilite, basees sur 4 principes :
Perceptible
Le contenu doit etre percu par tous les sens
Exemple : Texte alternatif pour les images
Operable
L'interface doit etre utilisable par tous
Exemple : Navigation au clavier possible
Comprehensible
Le contenu doit etre compris facilement
Exemple : Langage clair, erreurs expliquees
Robuste
Le contenu doit fonctionner partout
Exemple : Compatible avec les technologies d'assistance
Rendre les images accessibles
L'attribut alt permet aux lecteurs d'ecran de decrire les images aux personnes non-voyantes.
<!-- Image SANS accessibilite (mauvais) -->
<img src="graphique.png">
<!-- Image AVEC accessibilite (bon) -->
<img src="graphique.png"
alt="Graphique montrant l'augmentation
des ventes de 20% en 2024">- alt="" sur une image informative
- alt="image" (non descriptif)
- Texte dans les images
- Description precise du contenu
- alt="" pour images decoratives
- Pas de "Image de..." au debut
Formulaires accessibles
Les formulaires doivent avoir des labels clairs et des messages d'erreur explicites.
<!-- Formulaire accessible -->
<form>
<label for="email">Adresse email :</label>
<input type="email"
id="email"
name="email"
aria-describedby="email-help"
required>
<span id="email-help">
Format : exemple@domaine.fr
</span>
<button type="submit">Envoyer</button>
</form>Structure HTML semantique
Une structure HTML bien organisee aide les technologies d'assistance a naviguer.
<!-- Structure semantique accessible -->
<header>
<nav aria-label="Menu principal">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/cours">Cours</a></li>
</ul>
</nav>
</header>
<main>
<h1>Titre principal</h1>
<article>
<h2>Section du contenu</h2>
</article>
</main>
<footer>
<p>Informations de contact</p>
</footer>Tester l'accessibilite
Voici des outils gratuits pour verifier l'accessibilite d'un site :
WAVE
Extension navigateur qui analyse les erreurs d'accessibilite
Lighthouse
Outil integre a Chrome DevTools avec score d'accessibilite
Contrast Checker
Verifie le ratio de contraste entre texte et fond
Lecteur d'ecran
NVDA (Windows) ou VoiceOver (Mac) pour tester
Quiz : Teste tes connaissances
5 questions pour verifier ce que tu as appris sur l'accessibilite web
A retenir
- L'accessibilite concerne 15% de la population
- Principes WCAG : Perceptible, Operable, Comprehensible, Robuste
- Toujours utiliser
altsur les images informatives - Navigation au clavier et contraste eleve sont essentiels
