Cours accessibilité web et SEO : un site utilisable par tous et visible
Accessibilité et SEO est un cours de niveau intermédiaire de 6 leçons (environ 3 h 16), avec 18 exercices et 18 questions de quiz. Prérequis : Mise en page responsive (Flexbox, Grid). Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Intermédiaire
- 6 leçons
- 3 h 16
- 18 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours montre comment un même socle, un HTML bien structuré, sert à la fois l'accessibilité et le référencement naturel. Vous apprendrez à appliquer les critères essentiels des WCAG et du RGAA (structure, images, formulaires, clavier, ARIA), à optimiser le référencement on-page (title, meta, canonical, Open Graph, données structurées) et à améliorer les Core Web Vitals. Vous terminerez par un audit complet mêlant Lighthouse et tests manuels.
Ce que tu sauras faire
- Structurer une page avec des éléments sémantiques, des repères et une hiérarchie de titres cohérente
- Rédiger des alternatives textuelles et des formulaires accessibles, et vérifier les contrastes
- Garantir la navigation au clavier et utiliser ARIA à bon escient
- Optimiser title, meta description, canonical, robots, sitemap et Open Graph
- Écrire et valider des données structurées JSON-LD avec schema.org
- Mesurer et améliorer les Core Web Vitals, et mener un audit Lighthouse complété par des tests manuels
Programme des 6 leçons
- Expliquer ce que sont l'accessibilité numérique et le référencement naturel, et leurs points communs
- Structurer une page avec les éléments de repère (landmarks) et une hiérarchie de titres cohérente
- Choisir l'élément HTML natif adapté (bouton, lien, liste)
Principes et cadre (WCAG, RGAA)HTML sémantique et repèresHiérarchie des titres
- 02
Images, formulaires et contrastes
- Rédiger des alternatives textuelles pertinentes
- Rendre un formulaire accessible : étiquettes, aides, erreurs
- Vérifier les contrastes et ne pas transmettre l'information par la couleur seule
Alternatives textuellesFormulaires accessiblesContrastes et couleurs
- 03
Clavier, focus et ARIA
- Garantir une navigation complète au clavier avec un focus visible
- Ajouter un lien d'évitement et gérer le focus des composants dynamiques
- Utiliser ARIA à bon escient (états, noms, zones live)
- 04
SEO on-page : title, meta, URL et indexation
- Rédiger un title et une meta description efficaces
- Maîtriser l'indexation : canonical, robots, robots.txt, sitemap
- Préparer le partage sur les réseaux sociaux avec Open Graph
Title et meta descriptionExploration et indexationOpen Graph
- 05
Données structurées avec JSON-LD
- Expliquer le rôle des données structurées et du vocabulaire schema.org
- Écrire un bloc JSON-LD pour une entreprise locale, un produit ou un fil d'Ariane
- Valider les données structurées et respecter les règles des moteurs
- 06
Performance, Core Web Vitals et audit Lighthouse
- Expliquer les Core Web Vitals (LCP, INP, CLS) et leurs seuils
- Appliquer les optimisations courantes (images, chargement, polices, JavaScript)
- Mener un audit avec Lighthouse et compléter par des tests manuels d'accessibilité
Core Web VitalsOptimisation des performancesAudit Lighthouse et tests manuels
Projet final
Audit et mise en conformité d'un site vitrine
Prenez un site vitrine existant (le vôtre, celui d'une association ou un modèle fourni) et menez un audit complet d'accessibilité et de SEO, puis corrigez une page modèle. L'audit combine Lighthouse, inspection du code et tests manuels au clavier et au lecteur d'écran. La page corrigée doit atteindre les seuils « bons » des Core Web Vitals en laboratoire, respecter les critères WCAG AA étudiés et disposer de balises meta, Open Graph et données structurées complètes.
Livrables
- Un rapport d'audit avant/après : scores Lighthouse, problèmes classés par gravité et critère WCAG ou règle SEO concerné
- La page corrigée (HTML et CSS) avec structure sémantique, formulaires et navigation clavier accessibles
- Le head complet : title, meta description, canonical, Open Graph
- Un bloc JSON-LD validé (LocalBusiness ou Organization, et BreadcrumbList si pertinent)
- Un fichier robots.txt et un sitemap.xml
- Une grille de tests manuels (clavier, lecteur d'écran, zoom 200 %) complétée
Critères d'évaluation
- Structure sémantique et hiérarchie de titres correctes
- Alternatives textuelles, formulaires et contrastes conformes au niveau AA
- Parcours complet au clavier avec focus visible
- Balises meta uniques et pertinentes, indexation maîtrisée
- Données structurées valides et cohérentes avec la page
- Amélioration mesurée des Core Web Vitals en laboratoire
- Qualité et honnêteté du rapport (limites de l'audit automatique mentionnées)
Questions fréquentes
Pourquoi apprendre l'accessibilité et le SEO dans le même cours ?
Parce qu'ils reposent sur la même base : un HTML sémantique et bien structuré. Les lecteurs d'écran et les robots des moteurs de recherche lisent tous deux le code plutôt que le rendu visuel. Une page accessible est généralement mieux comprise par les moteurs.
L'accessibilité est-elle obligatoire pour mon site ?
En France, elle l'est pour les services publics et les grandes entreprises (RGAA). Depuis le 28 juin 2025, l'Acte européen sur l'accessibilité l'étend à de nombreux services numériques, dont le commerce en ligne, avec une exemption pour les micro-entreprises de services. Même sans obligation, elle élargit votre audience.
Un bon score Lighthouse suffit-il ?
Non. Lighthouse est un excellent outil de diagnostic, mais les tests automatiques ne détectent qu'une partie des problèmes d'accessibilité, et le classement se fonde sur les données de terrain des vrais visiteurs. Le cours vous apprend à compléter l'audit par des tests manuels.
Quels prérequis faut-il pour suivre ce cours ?
Il faut connaître les bases du HTML et du CSS. Quelques notions de JavaScript aident pour les composants interactifs (menu, modale) mais restent accessibles.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « Accessibilité et SEO » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.