HTML Accessibility and SEO Basics: Landmarks, Alt Text, Metadata

Here is a page for a small bakery, Crumb and Co. It looks lovely. Put your mouse in a drawer, press Tab ten times, and nothing visibly happens. Turn on a screen reader and it says "image, IMG_4471.jpg" and "clickable" a dozen times. Search results show the title "Untitled". Nothing about it is broken visually, and nearly all the damage is in the markup. This lesson walks through the fixes in the order that gives the biggest improvement first.

Start by reading the broken version

<!DOCTYPE html>
<html>                                   <!-- no lang -->
<head>
  <title>Untitled</title>                <!-- meaningless title -->
</head>
<body>
  <div class="top">
    <h3>Crumb and Co.</h3>                <!-- heading level chosen for size -->
    <div class="menu">
      <div onclick="go('menu')">Menu</div>   <!-- not focusable, not a link -->
      <div onclick="go('visit')">Visit</div>
    </div>
  </div>

  <img src="IMG_4471.jpg">                <!-- no alt, no size -->
  <h1>Sourdough, baked at 4 am</h1>
  <p>Order by 6 pm for next-day pickup.
     <a href="/order">Click here</a></p>

  Email<input type="text">                <!-- no label -->
  <div class="btn" onclick="send()">Send</div>
</body>
</html>

Every comment is a separate failure someone will hit: keyboard users cannot reach the menu items, screen reader users get no landmarks and a nameless text box, and the heading order (h3 before h1) breaks the outline they use to scan.

The repaired page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sourdough Bakery in Leeds | Crumb and Co.</title>
  <meta name="description" content="Hand-shaped sourdough baked at 4 am. Order by 6 pm for next-day pickup at our Kirkgate shop.">
  <link rel="canonical" href="https://crumb.example/">
  <meta property="og:title" content="Crumb and Co. Sourdough Bakery">
  <meta property="og:description" content="Order by 6 pm for next-day pickup.">
  <meta property="og:image" content="https://crumb.example/img/og-loaf.jpg">
</head>
<body>
  <a href="#content">Skip to main content</a>

  <header>
    <p><strong>Crumb and Co.</strong></p>
    <nav aria-label="Main">
      <ul>
        <li><a href="/menu" aria-current="page">Menu</a></li>
        <li><a href="/visit">Visit</a></li>
      </ul>
    </nav>
  </header>

  <main id="content">
    <h1>Sourdough, baked at 4 am</h1>
    <img src="img/loaves.jpg" width="900" height="600"
         alt="Six dark-crusted loaves cooling on a wire rack">
    <p>Order by 6 pm for next-day pickup.
       <a href="/order">Place a pickup order</a></p>

    <form action="/contact" method="post">
      <label for="email">Email address</label>
      <input id="email" name="email" type="email" autocomplete="email" required>
      <button type="submit">Send message</button>
    </form>
  </main>

  <footer>
    <p>9 Kirkgate, Leeds. Open Tuesday to Sunday.</p>
  </footer>

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Bakery",
    "name": "Crumb and Co.",
    "address": { "@type": "PostalAddress", "streetAddress": "9 Kirkgate", "addressLocality": "Leeds" }
  }
  </script>
</body>
</html>

Visually the page is almost identical, apart from default styles on the new list, form and link. Behaviourally it is a different page: Tab now moves through the skip link, two menu links, the order link, the email field and the button, in that order, and each shows the browser's focus ring. A screen reader lists a banner, a navigation labelled "Main", the main region and a footer, and announces "Email address, edit text" for the field.

Five rules that fix most pages

• Headings are an outline, not a font size. One h1, then h2 for sections, h3 inside them, no skipped levels. Change the size with CSS.
• Use the native element. A real button is focusable, activates with Enter and Space and is announced as a button for free. A div needs role, tabindex and key handlers to approximate it. If a link navigates, use a; if it performs an action, use button.
• Name everything. Fields need a label, icon-only buttons need text or aria-label, and repeated landmarks such as two nav elements need distinct labels.
• Write alt text for the purpose, not the pixels. Describe what the image tells the reader in context; use alt="" for decoration; for an image inside a link, describe the destination.
• Do not trap or hide focus. Avoid tabindex values above 0, and never remove the focus outline without providing a clear replacement in CSS.

Metadata that helps search engines and people

Search engines read the same HTML structure assistive technology does, which is why accessibility and SEO overlap so much. A descriptive title is the clearest on-page signal for what a page is about, so make it unique per page and lead with the topic. A meta description does not directly rank a page, and search engines may replace it with text taken from the page, but a clear one often becomes the snippet people read before clicking. Google has said it ignores the old meta keywords tag, so skip it. A canonical link tells search engines which URL is the preferred version when the same content is reachable at several addresses, and Open Graph tags control the preview when someone shares the link. JSON-LD structured data describes the business or article in a machine-readable way; it makes you eligible for some enhanced results but guarantees none.

How to test in five minutes

1. Unplug your mouse mentally: press Tab from the top and confirm every interactive thing is reachable, in a sensible order, with a visible focus indicator.
2. Zoom the browser to 200 percent and check that nothing overlaps or disappears.
3. Run the Lighthouse accessibility audit in DevTools and fix each flagged element, remembering that automated tools find only a fraction of problems.
4. Turn on a screen reader (Narrator on Windows, VoiceOver on macOS) and listen to the first screen.
5. View the page source and confirm title, description and canonical are present and unique to the page.

Common mistakes

• Keyword stuffing alt text. "bread bakery Leeds best sourdough cheap" reads as spam to listeners and gives search engines nothing real. Describe the image.
• Same title on every page. Browser history, tabs and search results become indistinguishable. Lighthouse flags Document does not have a <title> element when missing entirely.
• `div onclick` for buttons. Keyboard users cannot focus it, and if you add only a role="button" the audit still flags it until you also handle tabindex and the Enter and Space keys.
• Skipping heading levels. Jumping from h1 to h4 gives screen reader users a broken outline; the axe rule is Heading levels should only increase by one.
• Hiding content with `display: none` and expecting it to be read. It is removed from the accessibility tree as well as the screen.

How this shows up in real projects and interviews

Many companies must meet accessibility standards such as WCAG, and front-end candidates are increasingly asked to audit a snippet like the broken page above. A confident answer fixes headings, labels, alt text and keyboard access first, then mentions ARIA only where native HTML falls short. For SEO, the page-level work is exactly this metadata; the wider topic of ranking is covered in SEO Fundamentals. When you build UI with components, the same rules apply to every element the component renders.