Skip to main content

​
Exercise objective

In this exercise, you’ll identify and fix landmark element issues in a deliberately broken page. This will help you understand the importance of proper semantic HTML structure for screen reader users.

​
The challenge

Navigate to the Broken Landmarks page in the course demo site: 
http://localhost:3000/broken-landmarks
Make sure you have the development server running with bun run dev before accessing this page.

​
What’s wrong?

The page looks fine visually, but has serious structural problems that affect accessibility:
  • Generic <div> elements instead of semantic landmarks
  • Missing or incorrect landmark elements
  • No clear page structure for screen readers
  • Poor navigation experience for assistive technology users

​
What are landmarks?

Landmark elements provide a way to identify and navigate major sections of a page. Screen readers use them to help users quickly jump between different areas.

​
Key landmark elements

<header>

Contains the site banner, logo, and main navigation. Usually appears at the top of the page.

<nav>

Contains navigation links, either primary site navigation or secondary navigation menus.

<main>

Contains the primary content of the page. There should only be one <main> element per page.

<footer>

Contains footer information like copyright, contact info, and secondary links.

<section>

Represents a thematic grouping of content, typically with a heading.

<aside>

Contains tangentially related content, like sidebars or pull quotes.

​
Your task

1

Examine the broken page

Open src/pages/broken-landmarks.html in your code editor and inspect the HTML structure.
The page uses <div> elements where semantic landmarks should be:
<!-- BAD: Generic divs -->
<div class="sticky top-0 z-10 bg-slate-300/30 py-3 shadow-lg backdrop-blur-sm">
  <!-- Navigation content -->
</div>

<span id="main-content" class="grid place-items-center" tabindex="-1">
  <!-- Main content -->
</span>

<div class="bg-slate-300/30 py-5 text-center">
  <!-- Footer content -->
</div>
2

Replace the header

Replace the first <div> with a proper <header> element:
<header class="sticky top-0 z-10 bg-slate-300/30 py-3 shadow-lg backdrop-blur-sm">
  <!-- Keep the skip link -->
  <a href="#main-content" class="skip-link">Skip to content</a>
  
  <!-- Navigation should also be a landmark -->
  <nav class="container mx-auto flex items-center justify-between gap-4 max-md:flex-wrap [&_a]:p-2">
    <!-- Navigation content -->
  </nav>
</header>
3

Fix the main content area

Replace the <span> with a proper <main> element:
<main id="main-content" class="grid place-items-center" tabindex="-1">
  <div class="text-center text-xl">
    <!-- Content -->
  </div>
</main>
The id="main-content" is important because the skip link targets it. Keep this attribute!
4

Replace the footer

Replace the last <div> with a proper <footer> element:
<footer class="bg-slate-300/30 py-5 text-center">
  <p>Web A11y for Devs, <span id="current-year"></span></p>
</footer>
5

Test with a screen reader

Open the page with a screen reader and test the landmark navigation:
  • Press D to cycle through landmarks
  • Press Insert + F7 to open the Elements List
  • Select “Landmarks” to see all landmarks on the page
6

Verify the fixes

Test that you can now:
  • Navigate directly to the main content using the skip link
  • Use screen reader landmark navigation to jump between header, nav, main, and footer
  • See a logical structure when viewing the page outline

​
Complete solution

Here’s the corrected structure:
broken-landmarks.html
<!doctype html>
<html lang="en">
  <head>
    <!-- Head content -->
  </head>

  <body class="min-h-dvh">
    <!-- Proper header landmark -->
    <header class="sticky top-0 z-10 bg-slate-300/30 py-3 shadow-lg backdrop-blur-sm">
      <a href="#main-content" class="skip-link">Skip to content</a>

      <!-- Proper nav landmark -->
      <nav class="container mx-auto flex items-center justify-between gap-4 max-md:flex-wrap [&_a]:p-2">
        <!-- Navigation content -->
      </nav>
    </header>

    <!-- Proper main landmark -->
    <main id="main-content" class="grid place-items-center" tabindex="-1">
      <div class="text-center text-xl">
        <p>
          You found the secret "Broken Landmarks" page! 🥳
          <br />
          Hmm... why are all the colors off?
        </p>

        <br />

        <p>
          Try to identify and fix all <b>landmark element related issues</b> you can find - there's
          quite a few of them...
        </p>

        <a href="./introduction" class="font-semibold text-blue-800 underline">
          Back to Introduction</a
        >
      </div>
    </main>

    <!-- Proper footer landmark -->
    <footer class="bg-slate-300/30 py-5 text-center">
      <p>Web A11y for Devs, <span id="current-year"></span></p>
    </footer>
  </body>
</html>

​
Testing your solution

​
Browser DevTools

Most modern browsers show landmark structure:
  1. Open DevTools (F12)
  2. Go to the Elements tab
  3. Look for the Accessibility pane (you may need to enable it)
  4. Expand the Accessibility tree to see landmarks
  1. Open DevTools (F12)
  2. Go to the Accessibility tab
  3. View the Accessibility tree to see landmark structure

​
Automated testing

You can also use automated tools: 
# Using axe-core CLI
npx @axe-core/cli http://localhost:3000/broken-landmarks

# Using pa11y
npx pa11y http://localhost:3000/broken-landmarks

​
Best practices

Use one <main> per page - There should only be one main landmark that contains the primary content.
Include a skip link - Always provide a “Skip to main content” link at the top of the page.
Use <nav> for navigation - Wrap navigation menus in <nav> elements, not just <ul> lists.
Label multiple landmarks of the same type - If you have multiple <nav> elements, use aria-label or aria-labelledby to distinguish them.
Keep heading hierarchy - Use proper heading levels (h1, h2, h3) to structure content within landmarks.

​
Why landmarks matter

Screen reader users often navigate by landmarks rather than reading the entire page. Without proper landmarks, they must read through all content linearly, which is time-consuming and frustrating.
A well-structured page allows screen reader users to:
  • Quickly jump to the main content
  • Skip repetitive navigation
  • Navigate between major page sections
  • Understand the page structure at a glance

​
Learn more

Landmark patterns

Learn more about landmark elements and when to use them

Semantic HTML

Understand the importance of semantic HTML for accessibility

​
Congratulations!

You’ve completed all three exercises. You now understand:
  • How to respect user motion preferences
  • Why native HTML elements are important
  • How to structure pages with proper landmarks
These fundamentals will help you build more accessible web applications.

Build docs developers (and LLMs) love

Get started for freeTalk to us