Niveau 5 · Performance, accessibilité & bonnes pratiques

5.3SEO & accessibilité

Objectif : respecter une structure de titres correcte, les textes alternatifs et les bonnes pratiques SEO/accessibilité.

Temps estimé : 13 min · lecture autonome · Si vous n'avez que 5 min : lisez « L'essentiel en 30s » + le schéma.

L'essentiel en 30 secondes

SEO : structure de titres correcte (un seul H1, hiérarchie), contenu de qualité, pages rapides.
Accessibilité : alt des images, hiérarchie des titres, contrastes suffisants, navigation claire.
SEO et accessibilité se rejoignent : une structure claire sert les deux.

Mini-cas filé — Nadia soigne le fond

Le site du menuisier est beau et rapide ; reste à le rendre trouvable et accessible à tous. Nadia vérifie un seul H1 par page, des alt sur les photos, des contrastes lisibles au soleil, une navigation claire. Elle constate que ces bonnes pratiques servent à la fois Google et les visiteurs.

Suite de 5.2 — rendre le site trouvable et inclusif.

1. SEO : structure et qualité

Le SEO (référencement naturel) optimise le site pour qu'il soit bien classé dans les moteurs. Les bonnes pratiques côté Elementor/WordPress : une structure de titres correcte (un seul H1, puis H2/H3 en hiérarchie), un contenu de qualité et pertinent, des pages rapides (niveau 5.1), des balises et des URL propres (souvent via une extension SEO).

Nadia vérifie chaque page : un H1 unique, une hiérarchie logique, des titres descriptifs.

2. Accessibilité (et elle rejoint le SEO)

L'accessibilité rend le site utilisable par tous, y compris les personnes en situation de handicap. Les bases : texte alternatif (alt) des images, structure de titres claire, contrastes suffisants, navigation cohérente (clavier).

Point clé : SEO et accessibilité se rejoignent — une structure de titres claire, des alt, un bon contraste aident à la fois les moteurs et les visiteurs. Soigner l'un, c'est souvent soigner l'autre.

Erreur d'interprétation fréquente : « SEO et accessibilité, ce sont deux chantiers séparés et optionnels ». Non : ils se rejoignent largement (titres, alt, structure claire) et sont essentiels — pour être trouvé ET pour que tout le monde puisse utiliser le site.

Un socle commun (titres, alt, structure claire) sert le SEO et l'accessibilité.

Version texte du schéma (SEO / lecteurs d'écran / traduction) : SEO : structure de titres (un seul H1, hiérarchie), contenu de qualité, pages rapides, URL/balises propres. Accessibilité : alt des images, hiérarchie des titres, contrastes, navigation clavier. Terrain commun : titres, alt, structure claire. Les deux se rejoignent : soigner l'un sert l'autre. Leçon : essentiel, pas optionnel.

🔎 Exemple concret — Rendre le site trouvable et inclusif (cas Nadia)

SEO : 1 H1/page, hiérarchie H2/H3, titres descriptifs, pages rapides.
Accessibilité : alt sur chaque image, contrastes vérifiés, navigation claire.
Terrain commun : la structure de titres et les alt servent les deux.
→ Vérifier chaque page avant livraison.

Résultat : un site mieux référencé et accessible à tous.

Leçon : SEO et accessibilité vont de pair.

Vocabulaire de la section

SEO (référencement naturel)

Optimiser le site pour un bon classement dans les moteurs de recherche.

Exemple simple : titres clairs, contenu pertinent, pages rapides.

Ce que ce n'est pas : bourrer de mots-clés sans structure.

Réflexe : structure + qualité + vitesse.

Structure de titres

Un seul H1 par page, puis H2/H3 en hiérarchie logique.

Exemple simple : H1 titre de page, H2 sections, H3 sous-parties.

Ce que ce n'est pas : plusieurs H1 ou des niveaux au hasard.

Réflexe : un H1, une hiérarchie descendante.

Texte alternatif (alt)

Décrire une image pour moteurs et lecteurs d'écran.

Exemple simple : alt « Table en chêne massif, finition huilée ».

Ce que ce n'est pas : alt vide ou nom de fichier.

Réflexe : chaque image utile a un alt descriptif.

Contraste

Écart texte/fond suffisant pour la lisibilité (accessibilité).

Exemple simple : texte foncé sur fond clair, lisible au soleil.

Ce que ce n'est pas : gris clair sur blanc.

Réflexe : vérifier le contraste de chaque texte.

SEO ↔ accessibilité

Les deux se rejoignent : titres, alt, structure claire servent les deux.

Exemple simple : une bonne hiérarchie aide Google ET les lecteurs d'écran.

Ce que ce n'est pas : les traiter comme des chantiers séparés optionnels.

Réflexe : soigner l'un, c'est souvent soigner l'autre.

En pratique — Vérifier SEO et accessibilité

Contrôlez qu'il y a un seul H1 par page et une hiérarchie H2/H3 logique.
Vérifiez un alt descriptif sur chaque image utile.
Contrôlez les contrastes texte/fond (lisibilité).
Testez la navigation (menu clair, utilisable au clavier).

Vous livrez un site mieux référencé et accessible à tous, grâce à un socle commun soigné.

Script prêt à dire — valoriser SEO + accessibilité (20 s)

« J'ai soigné la structure du site pour deux raisons liées : être mieux trouvé sur Google, et rester utilisable par tous — y compris les personnes malvoyantes. Titres bien hiérarchisés, descriptions d'images, bons contrastes : ces bonnes pratiques servent votre visibilité et vos visiteurs. »

Lier référencement et inclusion : même socle, double bénéfice.

Modèle copier-coller — check SEO/accessibilité

UN SEUL H1 PAR PAGE + HIÉRARCHIE H2/H3 : oui / non
ALT DESCRIPTIF SUR CHAQUE IMAGE UTILE : oui / non
CONTRASTES TEXTE/FOND SUFFISANTS : oui / non
NAVIGATION CLAIRE (clavier) : oui / non
PAGES RAPIDES (voir 5.1) : oui / non

Vitrine locale

Titres descriptifs + infos de contact claires pour le référencement local.

Blog

Hiérarchie de titres soignée par article, bénéfique SEO et lecture.

Images

Alt descriptifs : accessibilité + référencement des images.

Contrastes

Vérifier la lisibilité au soleil et pour tous les yeux.

✓ Bonnes pratiques

Un seul H1 par page, hiérarchie logique.
Alt descriptif sur chaque image utile.
Vérifier contrastes et navigation.

✗ Pièges fréquents

Plusieurs H1 ou titres au hasard.
Alt vides ou noms de fichiers.
Contrastes insuffisants (texte peu lisible).

Points clés à retenir

SEO : titres, contenu, vitesse, URL propres.
Accessibilité : alt, titres, contraste, clavier.
Les deux se rejoignent (socle commun).
Essentiel, pas optionnel.

Défi 48h — appliquez demain

Auditez une page : vérifiez un seul H1 + hiérarchie, les alt des images, les contrastes et la navigation clavier. Corrigez un défaut de chaque catégorie. 30 minutes.

Checklist sortie de section

Je respecte la hiérarchie des titres.
Je renseigne les alt et vérifie les contrastes.
Je soigne SEO et accessibilité ensemble.

Auto-évaluation 1-5 : ma structure de titres est correcte ?mon site est accessible (alt, contraste, clavier) ?

← 5.2 Responsive & conteneurs Suite : 5.4 Workflow & livraison →

Questions fréquentes

Combien de H1 par page pour le SEO ?

Un seul, le titre principal, puis une hiérarchie H2/H3. C'est bon pour le référencement et pour l'accessibilité (lecteurs d'écran).

Le texte alternatif sert-il au SEO ou à l'accessibilité ?

Aux deux : il décrit l'image pour les lecteurs d'écran (accessibilité) et aide les moteurs à comprendre l'image (SEO). C'est un exemple parfait de terrain commun.

SEO et accessibilité sont-ils vraiment liés ?

Largement : une structure de titres claire, des alt, un bon contraste et une navigation cohérente servent à la fois le référencement et l'accessibilité. Soigner l'un aide l'autre.

Vérifiez votre compréhension — scénario

Avant de livrer, Nadia veut un site à la fois bien référencé et accessible. Quel socle sert les deux ?

Ressources supplémentaires (optionnel, pour aller plus loin)

Doc

Accessibilité — Elementor

elementor.comFR

Examen du niveau 5Questions inédites et durcies pour valider vos acquis