34. Accessibilité et référencement de base

Un site sert à être trouvé et à être lu, par tout le monde. Ce chapitre traite ensemble deux sujets que l’on sépare d’habitude : l’accessibilité, qui permet à une personne malvoyante, âgée ou pressée d’utiliser votre site, et le référencement, qui permet à un moteur de recherche de le comprendre. Les deux reposent sur les mêmes bonnes habitudes, prises au moment de construire.

En bref

Public: Toute personne qui construit un site vitrine et veut qu’il soit trouvé sur Google et utilisable par tous ses visiteurs.
Enjeu: Livrer un site lisible au clavier, au lecteur d’écran et sur un petit écran, et correctement décrit pour les moteurs de recherche.
Idée clé: Un site bien structuré — un H1, des titres dans l’ordre, des images décrites, des liens explicites — est accessible et bien référencé par le même geste.
Prérequis: Chapitres 13 (titres et typographie), 14 (images et texte alternatif), 15 (boutons et liens), 28 (formulaires), 33 (performance).
Lecture: Environ 16 minutes (+ 30 minutes d’exercice).

34.1 — L’accessibilité : de quoi parle-t-on, et qui y est tenu

Un site est accessible quand une personne peut l’utiliser quelles que soient ses capacités : une personne aveugle qui écoute la page avec un lecteur d’écran, une personne qui ne peut pas manier une souris et navigue au clavier, une personne âgée qui a besoin de gros caractères et de contrastes forts, une personne dyslexique, ou simplement quelqu’un qui lit votre site au soleil sur un téléphone. Les personnes concernées se comptent en millions en France ; sur un territoire rural où la clientèle est souvent âgée, la part de visiteurs concernés est loin d’être marginale.

Sur le plan légal, il faut rester précis. Les obligations d’accessibilité numérique visent d’abord les services publics, tenus de respecter le RGAA (Référentiel général d’amélioration de l’accessibilité) et de publier une déclaration d’accessibilité. Depuis le 28 juin 2025, l’acte européen sur l’accessibilité, transposé en droit français, étend des obligations à certains services numériques du secteur privé — le commerce en ligne notamment, ainsi que les services bancaires, de transport ou de communication —, selon la taille de l’entreprise, les plus petites en étant exemptées. Une menuiserie de trois personnes qui présente ses prestations sur un site vitrine n’est donc pas, à ce jour, soumise au RGAA.

Cela ne veut pas dire que le sujet ne la concerne pas. Les bonnes pratiques d’accessibilité restent recommandées à tous, pour trois raisons très concrètes : elles élargissent la clientèle, elles rendent le site plus lisible pour tout le monde, et elles coïncident presque point par point avec ce que les moteurs de recherche attendent d’une page. La suite du chapitre s’en tient à ces pratiques, sans prétendre à une conformité que personne ne vous demande.

À savoir

Le RGAA est la déclinaison française d’un standard international, les WCAG (Web Content Accessibility Guidelines), organisées en niveaux A, AA et AAA. Quand un outil vous parle de « niveau AA » ou de « contraste 4,5:1 », il se réfère à ces règles. Vous n’avez pas à les apprendre ; les dix pratiques ci-dessous en couvrent l’essentiel pour un site vitrine.

34.2 — Dix pratiques qui rendent un site Elementor accessible

Chacune de ces pratiques a déjà été rencontrée dans un chapitre précédent. Elles sont rassemblées ici avec l’endroit précis où on les applique dans Elementor.

Pratique	Pourquoi	Où, dans Elementor
Un seul H1, puis H2, H3 dans l’ordre	Le lecteur d’écran et Google lisent la page par ses titres, comme un sommaire.	Élément Titre › Balise ; masquer le titre du thème si vous en créez un vous-même (Réglages de page › Masquer le titre).
Texte alternatif sur les images utiles	C’est ce qu’entend une personne aveugle et ce que lit le moteur.	Médiathèque › champ Texte alternatif ; vide pour une image purement décorative.
Contraste d’au moins 4,5:1 (3:1 pour les gros titres)	Un texte gris clair sur fond blanc cassé est illisible pour beaucoup.	Variables de couleur (chapitre 18) ; vérifier avec un outil de contraste.
Corps de texte de 16 px au moins, en rem	Respecte le zoom du navigateur et la lecture sur téléphone.	Onglet Style › Typographie, tailles en `rem`.
Focus visible sur les liens et boutons	La personne qui navigue au clavier doit voir où elle est.	État Focus d’une classe (chapitre 18) ; ne jamais supprimer le contour.
Liens et boutons explicites	« Demander un devis » se comprend hors contexte ; « Cliquez ici » non.	Texte de l’élément Bouton ; lien dans le Paragraphe.
Formulaires avec libellés visibles	Un texte indicatif dans le champ disparaît dès qu’on tape.	Formulaire atomique › élément Libellé relié au champ ; widget Formulaire › afficher les libellés.
Jamais d’information par la couleur seule	Une personne daltonienne ne voit pas « en rouge, les champs obligatoires ».	Ajouter un astérisque, un mot, une icône.
Peu d’animations, courtes	Certaines personnes ont activé une réduction des mouvements dans leur système.	Onglet Interactions : entrée uniquement, 300 à 600 ms (chapitre 20).
Menu utilisable au clavier	Tabulation d’un lien à l’autre, sous-menus atteignables.	Widget Menu WordPress (Pro) ; tester avec la touche `Tab`.

Attention

Rien ne garantit qu’une animation Elementor se désactive d’elle-même pour les personnes qui ont demandé une réduction des mouvements à leur système. La règle la plus sûre reste celle du chapitre 20 : peu d’animations, jamais sur le texte principal, jamais en boucle.

34.3 — Vérifier : au clavier, avec un outil, avec Ally

Le premier test ne coûte rien et prend cinq minutes : lâchez la souris. Ouvrez la page d’accueil et appuyez sur la touche Tab plusieurs fois. Vous devez voir un contour se déplacer de lien en lien, dans un ordre logique, atteindre chaque bouton, entrer dans le menu et en sortir, arriver jusqu’au formulaire et permettre de l’envoyer avec Entrée. Si le contour disparaît quelque part, si un élément est sauté ou si l’ordre saute d’un bout à l’autre de la page, vous avez trouvé un défaut.

Testez au clavier. Page d’accueil ouverte dans le navigateur, appuyez sur Tab jusqu’à revenir au début. Notez chaque endroit où le contour de focus n’est pas visible.
Lancez Lighthouse. Dans Chrome ou Edge, ouvrez les outils de développement (touche F12), onglet Lighthouse, cochez la catégorie Accessibilité et lancez l’analyse. Vous obtenez une note sur 100 et la liste des défauts détectables automatiquement : contrastes, images sans texte alternatif, libellés manquants, ordre des titres. PageSpeed Insights (chapitre 33) donne le même rapport en ligne.
Passez WAVE. L’outil gratuit WAVE (par WebAIM) affiche les erreurs directement sur la page, à leur emplacement ; c’est le plus lisible pour un débutant.
Vérifiez les contrastes. Prenez chaque couple texte / fond de vos variables (bois sur blanc cassé, anthracite sur vert sauge…) et passez-les dans un vérificateur de contraste ; corrigez la variable, pas l’élément.
Corrigez, puis refaites l’analyse. Les outils automatiques ne détectent qu’une partie des problèmes ; le test au clavier et une lecture attentive des textes alternatifs restent indispensables.

Elementor Pro

Elementor propose une extension dédiée, Ally, accessible dans le menu Elementor › Accessibility de l’administration. Elle ajoute pour le visiteur un panneau d’options (taille du texte, contrastes) et des contrôles assistés par IA, facturés en crédits Elementor One (20 crédits par correctif IA, l’abonnement One en fournissant 25 000 par mois). Gardez à l’esprit qu’un panneau d’options ajouté par-dessus la page n’en corrige pas la construction : il complète un site bien structuré, il ne remplace pas les dix pratiques ci-dessus.

34.4 — Référencement : ce qu’Elementor fait et ne fait pas

Le référencement (ou SEO, Search Engine Optimization) désigne tout ce qui permet à une page d’apparaître dans les résultats d’un moteur de recherche quand quelqu’un tape « menuisier Murol » ou « escalier sur mesure Puy-de-Dôme ». Elementor n’est pas un outil de référencement et ne le prétend pas ; il y contribue par la structure des pages et par leur vitesse, et il laisse le reste à WordPress et à une extension spécialisée.

Ce dont il s’agit	Elementor	Qui s’en charge
Structure de la page (H1, H2, balises Header, Section, Footer)	✓	Vous, dans les éléments Titre et les conteneurs (balise HTML).
Vitesse de chargement	✓	Vous, avec le chapitre 33.
Texte alternatif et nom des images	✓	Vous, dans la Médiathèque.
Titre et description affichés dans les résultats Google	—	Une extension de référencement (Yoast SEO ou Rank Math, cités comme exemples).
Plan du site (sitemap) envoyé aux moteurs	—	WordPress en produit un de base ; l’extension de référencement l’enrichit.
Redirections quand une adresse change	—	L’extension de référencement ou l’hébergeur.
Données structurées « entreprise locale »	—	L’extension de référencement (réglages « SEO local »).
Contenu réel, utile, rédigé pour vos clients	—	Vous, avant même d’ouvrir Elementor (chapitre 37).

Définition

Métadonnées — le titre et la description qu’un moteur de recherche affiche dans ses résultats pour une page. Elles ne sont pas visibles sur la page elle-même ; elles se rédigent dans les champs de l’extension de référencement, sous l’éditeur WordPress de chaque page. Un titre de 50 à 60 caractères avec le mot-clé et la commune, une description de 150 caractères qui donne envie de cliquer.

34.5 — Les bases qui rapportent

Pour un artisan, le référencement utile est local : il s’agit d’apparaître quand quelqu’un cherche votre métier près de chez vous. Cela demande moins de technique que de méthode, et les règles suivantes valent pour tout le support.

Une page par prestation, et des pages locales sans copier-coller

Une page « Prestations » qui parle de tout est moins bien classée que trois pages « Escaliers sur mesure », « Cuisines sur mesure » et « Agencements » qui parlent chacune d’une chose. De même, une page « Menuisier à La Bourboule » peut avoir du sens si vous y intervenez souvent — à condition d’y écrire un contenu propre (chantiers réalisés dans la commune, délais, particularités), et non de dupliquer la page de Murol en changeant le nom de la ville. Les moteurs repèrent les pages copiées et ne retiennent que l’une d’elles ; les pages locales vides desservent le site au lieu de le servir.

Un H1 par page, des titres descriptifs, un contenu réel

Le H1 dit de quoi parle la page : « Escaliers sur mesure en bois massif », pas « Bienvenue ». Les H2 découpent le propos. Le texte répond aux questions que se pose un client : quel bois, quel délai, quel secteur, quel budget indicatif, comment se passe un projet. Une page de trois lignes avec une grande photo ne dit rien ni au visiteur ni au moteur.

Des images nommées, des liens internes, une fiche Google reliée

Le nom du fichier compte : escalier-chene-murol.webp vaut mieux que IMG_4521.jpg. Chaque page renvoie vers les autres par des liens dans le texte (« voir nos réalisations »), ce qui aide les moteurs à parcourir le site et le visiteur à circuler. Enfin, la fiche d’établissement Google (Google Business Profile) est, pour un artisan, souvent plus visible que le site lui-même : reliez-la au site, et veillez à ce que nom, adresse et téléphone soient écrits exactement de la même façon sur la fiche, dans le pied de page et dans les mentions légales.

Piège classique

Pendant la construction, on coche souvent dans Réglages › Lecture la case Demander aux moteurs de recherche de ne pas indexer ce site, pour ne pas être trouvé avec un site inachevé. C’est une bonne idée — à condition de la décocher à la mise en ligne. Un site invisible dans Google trois mois après son lancement a presque toujours cette case pour cause. Ajoutez-la à votre checklist de mise en ligne (chapitre 37). Le mode maintenance d’Elementor, lui, se retire dans Elementor › Éditeur › Outils.

Ne vous fiez pas aux promesses de « première page en trente jours ». Le référencement local d’un site neuf se construit sur des mois, avec du contenu, des avis clients et une fiche Google tenue à jour. Ce support ne promet aucun résultat chiffré, et vous devez vous méfier de ceux qui en promettent.

Grille d’audit en vingt points

Voici la grille utilisée dans l’exercice ci-dessous. Les dix premiers points relèvent de l’accessibilité, les dix suivants du référencement ; elle se réutilise pour chaque page du site.

Un seul H1, qui décrit la page.
Les H2 et H3 suivent dans l’ordre, sans saut de niveau.
Chaque image utile a un texte alternatif ; les images décoratives n’en ont pas.
Tous les couples texte / fond atteignent 4,5:1 (3:1 pour les gros titres).
Le corps de texte fait au moins 16 px, en rem.
Le focus est visible sur chaque lien et bouton au clavier.
Chaque lien et bouton se comprend hors contexte.
Chaque champ de formulaire a un libellé visible ; l’obligation est signalée autrement que par la couleur.
Les animations sont rares, courtes, absentes du texte principal.
Le menu se parcourt entièrement au clavier, sous-menus compris.
Le titre et la description de la page sont renseignés dans l’extension de référencement.
La page traite d’un seul sujet et répond aux questions d’un client.
Le texte fait au moins quelques paragraphes réels, pas une phrase et une photo.
Les fichiers d’images portent des noms parlants.
La page contient au moins deux liens vers d’autres pages du site.
La page se charge en moins de trois secondes sur mobile (chapitre 33).
L’adresse de la page (permalien) est courte et lisible.
Aucune page locale n’est une copie d’une autre.
Nom, adresse et téléphone sont identiques au site, à la fiche Google et aux mentions légales.
La case « ne pas indexer ce site » est décochée.

Exercice 34.1 — Audit de la page « Prestations » en vingt points 30 min

Objectif : passer la page « Prestations » de la Menuiserie Roche à la grille ci-dessus, corriger ce qui peut l’être dans Elementor, et distinguer ce qui relève d’une extension ou d’une réécriture.

Ouvrez la page « Prestations » publiée dans un onglet, et la même page dans Elementor dans un autre. Parcourez les vingt points de la grille en notant pour chacun : conforme, à corriger, ou hors champ.
Faites le test au clavier avec Tab sur la page publiée, puis lancez Lighthouse en catégorie Accessibilité. Ajoutez ses remarques à votre relevé.
Corrigez dans Elementor tout ce qui s’y corrige : balises de titres, textes alternatifs manquants dans la Médiathèque, contraste d’une variable, libellés du formulaire, texte des boutons.
Listez à part ce qui demande autre chose qu’Elementor : titre et description à rédiger dans l’extension de référencement, paragraphe à écrire sur les délais et le secteur d’intervention, image à renommer avant de la retéléverser.
Relancez Lighthouse et comparez la note. Conservez la grille remplie : elle servira au contrôle qualité du chapitre 37, comme nous le faisons en atelier Num Compagny.

Résultat attendu : une page « Prestations » avec un seul H1 descriptif, des titres dans l’ordre, des images décrites, un formulaire ou un bouton de contact utilisable au clavier, une note Lighthouse en accessibilité supérieure à 90, et une liste courte et précise des textes qui restent à rédiger.

À retenir

Les obligations légales d’accessibilité visent les services publics et, depuis le 28 juin 2025, certains services numériques privés selon la taille de l’entreprise ; pour une TPE, les bonnes pratiques restent recommandées, non imposées.
Dix pratiques suffisent à un site vitrine : un H1, des titres dans l’ordre, des textes alternatifs, un contraste de 4,5:1, 16 px minimum, un focus visible, des liens explicites, des libellés de formulaire, peu d’animations, un menu utilisable au clavier.
On vérifie d’abord au clavier, puis avec Lighthouse ou WAVE ; Ally complète un site bien construit, il ne le corrige pas.
Elementor apporte la structure et la vitesse ; les métadonnées, le plan du site, les redirections et les données structurées relèvent d’une extension de référencement.
Le référencement d’un artisan est local : une page par prestation, des pages locales écrites et non copiées, une fiche Google reliée, et la case « ne pas indexer » décochée à la mise en ligne.