Pourquoi l'accessibilité et le SEO : la structure sémantique

Accessibilité et SEO : la même base

L’accessibilité numérique consiste à rendre un site utilisable par tous, y compris les personnes aveugles (lecteur d’écran), malvoyantes (zoom, contrastes), qui naviguent au clavier ou à la commande vocale, sourdes, ou ayant des troubles cognitifs. Le référencement naturel (SEO) consiste à rendre un site compréhensible et attractif pour les moteurs de recherche.

Point commun : un lecteur d’écran et le robot d’un moteur de recherche ne voient pas votre mise en page. Ils lisent le HTML. Une page bien structurée sert donc les deux.

Le cadre

• Les WCAG (Web Content Accessibility Guidelines, version 2.2) définissent des critères classés en niveaux A, AA et AAA. Le niveau AA est la cible habituelle.
• En France, le RGAA traduit ces critères en tests vérifiables. Il s’impose aux services publics et aux grandes entreprises.
• Depuis le 28 juin 2025, l’Acte européen sur l’accessibilité étend l’obligation à de nombreux produits et services, dont le commerce en ligne et les services bancaires (les micro-entreprises de services en sont exemptées).

Les quatre principes des WCAG : perceptible, utilisable, compréhensible, robuste.

Le squelette sémantique

<!doctype html>
<html lang="fr">                       <!-- langue : prononciation correcte et signal SEO -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menuiserie Martin – Fabrication sur mesure à Nantes</title>
</head>
<body>
  <header>
    <a href="/">Menuiserie Martin</a>
    <nav aria-label="Navigation principale">
      <ul>
        <li><a href="/realisations">Réalisations</a></li>
        <li><a href="/contact" aria-current="page">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>                               <!-- contenu principal : un seul par page -->
    <h1>Menuiserie sur mesure à Nantes</h1>
    <section aria-labelledby="t-services">
      <h2 id="t-services">Nos services</h2>
      <h3>Cuisines</h3>
      <h3>Escaliers</h3>
    </section>
  </main>

  <footer>© 2026 Menuiserie Martin</footer>
</body>
</html>

Ces éléments sont des repères (landmarks) : un utilisateur de lecteur d’écran peut sauter directement à la navigation ou au contenu principal. aria-current="page" signale le lien de la page en cours.

La hiérarchie des titres

Les titres forment la table des matières de la page. Les utilisateurs de lecteurs d’écran naviguent souvent de titre en titre, et les moteurs s’en servent pour comprendre les sujets traités.

• Un seul <h1> qui décrit le sujet de la page.
• Puis <h2>, <h3>… sans sauter de niveau (pas de h2 suivi d’un h4).
• Choisissez le niveau pour le sens, pas pour la taille : la taille se règle en CSS.

Bouton ou lien ?

<!-- Mauvais : ni focusable au clavier, ni annoncé comme bouton -->
<div class="btn" onclick="ouvrirMenu()">Menu</div>

<!-- Bon : action → bouton ; navigation → lien -->
<button type="button" onclick="ouvrirMenu()">Menu</button>
<a href="/tarifs">Voir les tarifs</a>

Les éléments natifs apportent gratuitement le focus clavier, l’activation par Entrée ou Espace et le bon rôle annoncé. Un lien <a href> est en plus suivi par les robots, ce qui compte pour le SEO.

À retenir

• Le HTML sémantique est la fondation commune de l’accessibilité et du SEO.
• lang, repères, un main, un h1, des titres sans saut de niveau.
• Bouton pour agir, lien pour naviguer.