Un site peut être beau.
Un site peut être rapide.
Mais s’il exclut, il est coupable.
🎯 Objectifs d’apprentissage
À la fin de ce module, vous serez capable de :
- Créer des sites accessibles à tous, sans exception
- Appliquer les standards du W3C
- Améliorer le référencement naturel (SEO)
- Livrer un code propre, performant et défendable
♿ Accessibilité — Les règles du W3C (WCAG)
L’accessibilité n’est pas une option.
C’est une obligation morale… et parfois légale.
🖼️ Texte alternatif pour les images
<img src="indice.jpg" alt="Capture d’écran du bug identifié">
- Décrit l’image
- Essentiel pour les lecteurs d’écran
- Indispensable si l’image ne charge pas
❌ alt="image"
✅ alt="Plan du serveur compromis"
🎨 Contraste des couleurs
- Texte lisible sur fond clair ou sombre
- Éviter les combinaisons trompeuses
- Tester avec des outils de contraste
Un indice invisible est un indice perdu.
⌨️ Navigation au clavier
- Tout doit être accessible avec Tab
- Ordre logique de navigation
- Focus visible
:focus {
outline: 2px solid #000;
}
Si on ne peut pas naviguer sans souris, le site échoue à l’interrogatoire.
🏷️ ARIA — En dernier recours
ARIA aide quand HTML ne suffit pas.
<button aria-label="Fermer la fenêtre">
✕
</button>
Règle d’or :
Pas d’ARIA si une balise HTML native suffit
ARIA mal utilisée, c’est un faux témoignage.
🔍 SEO de base — Être trouvé sans tricher
Un bon site ne se cache pas. Il se laisse indexer proprement.
🧱 Structure sémantique
<header>,<main>,<article>,<footer>- Titres hiérarchisés
- Contenu logique
Les moteurs lisent comme des inspecteurs.
🏷️ Métadonnées pertinentes
<meta name="description" content="Rapport technique sur une enquête web">
- Description claire
- Pas de bourrage de mots-clés
- Fidèle au contenu
🧭 URLs propres
❌
/index.php?id=42&cat=7
✅
/dossiers/site-fantome
- Lisibles
- Partageables
- SEO-friendly
🧬 Données structurées (microdata)
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">Rapport final</h1>
</article>
- Aident les moteurs à comprendre le contenu
- Rich snippets
- Meilleure visibilité
⚡ Performance — La rapidité sauve des vies
Un site lent, c’est un témoin qui s’enfuit.
🖼️ Images optimisées
- Bon format (WebP si possible)
- Bonne taille
- Pas d’images surdimensionnées
🧹 Code HTML minimaliste
- Pas de balises inutiles
- Pas de commentaires obsolètes
- Structure claire
Moins de bruit, plus de vérité.
⏳ Chargement différé (lazy loading)
<img src="preuve.jpg" alt="Preuve clé" loading="lazy">
- Charge quand nécessaire
- Améliore les performances
- Simple et efficace
✅ Validation et tests — Passer au crible
Un bon travail se vérifie.
✔️ Validateur W3C
- Détecte les erreurs HTML
- Garantit la conformité
- À utiliser régulièrement
♿ Testeurs d’accessibilité
- Lighthouse
- WAVE
- Tests manuels au clavier
Les outils aident. Les tests humains confirment.
🌐 Compatibilité navigateurs
- Tester sur plusieurs navigateurs
- Tester sur mobile
- Ne jamais supposer
Un site qui ne fonctionne que chez vous ne fonctionne pas.
Fin du module 10. Le dossier est propre. Accessible. Rapide. Conforme.
- Vous pouvez maintenant livrer le site sans craindre l’inspection.*