Why Accessibility and SEO: Semantic Structure

Accessibility and SEO: The Same Foundation

Digital accessibility means making a site usable by everyone, including people who are blind (screen reader), have low vision (zoom, contrast), navigate by keyboard or voice command, are deaf, or have cognitive impairments. Search engine optimization (SEO) means making a site understandable and attractive to search engines.

What they have in common: a screen reader and a search engine’s bot don’t see your layout. They read the HTML. A well-structured page therefore serves both.

The framework

• The WCAG (Web Content Accessibility Guidelines, version 2.2) define criteria ranked in levels A, AA and AAA. Level AA is the usual target.
• In France, the RGAA translates these criteria into verifiable tests. It applies to public services and large companies.
• Since June 28, 2025, the European Accessibility Act extends the obligation to many products and services, including online commerce and banking services (service micro-enterprises are exempt).

The four WCAG principles: perceivable, operable, understandable, robust.

The semantic skeleton

<!doctype html>
<html lang="en">                       <!-- language: correct pronunciation and an SEO signal -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Martin Joinery – Custom-Made Woodwork in Nantes</title>
</head>
<body>
  <header>
    <a href="/">Martin Joinery</a>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/realisations">Our work</a></li>
        <li><a href="/contact" aria-current="page">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>                               <!-- main content: only one per page -->
    <h1>Custom joinery in Nantes</h1>
    <section aria-labelledby="t-services">
      <h2 id="t-services">Our services</h2>
      <h3>Kitchens</h3>
      <h3>Staircases</h3>
    </section>
  </main>

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

These elements are landmarks: a screen reader user can jump straight to the navigation or the main content. aria-current="page" flags the link for the current page.

The heading hierarchy

Headings form the page’s table of contents. Screen reader users often navigate from heading to heading, and search engines use them to understand the topics covered.

• A single <h1> that describes the page’s subject.
• Then <h2>, <h3>… without skipping levels (no h2 followed by an h4).
• Choose the level for meaning, not for size: size is set in CSS.

Button or link?

<!-- Bad: neither keyboard-focusable nor announced as a button -->
<div class="btn" onclick="ouvrirMenu()">Menu</div>

<!-- Good: action → button; navigation → link -->
<button type="button" onclick="ouvrirMenu()">Menu</button>
<a href="/tarifs">See pricing</a>

Native elements give you keyboard focus, activation with Enter or Space, and the right announced role for free. An <a href> link is also followed by bots, which matters for SEO.

Key takeaways

• Semantic HTML is the shared foundation of accessibility and SEO.
• lang, landmarks, one main, one h1, headings without level skips.
• Button to act, link to navigate.