Accessibility 101: HTML Landmarks

•5 min read

What are HTML Landmarks?

HTML Landmarks are semantic elements that define the different regions of a webpage. They help users, especially those using assistive technologies, understand and navigate the structure of your website. Think of landmarks as signposts that guide users through different sections of your content.

Why are Landmarks Important?

Landmarks play a crucial role in web accessibility by:

  • Allowing screen reader users to quickly navigate between different page sections
  • Providing a clear structure for keyboard navigation
  • Helping users understand the purpose and organization of different page areas
  • Improving SEO by providing semantic structure to your content

Common HTML Landmarks

Here are the main landmark regions you should be familiar with:

Header <header>

The header landmark contains introductory content for a page or section. Typically includes:

<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

Navigation <nav>

The navigation landmark identifies major navigation blocks:

<nav aria-label="Main">
    <!-- Primary navigation links -->
</nav>

<nav aria-label="Footer">
    <!-- Footer navigation links -->
</nav>

Main <main>

The main landmark represents the primary content of your page:

<main>
    <h1>Welcome to Our Website</h1>
    <!-- Main content goes here -->
</main>

Complementary <aside>

The aside landmark contains supporting content:

<aside>
    <h2>Related Articles</h2>
    <!-- Supporting content -->
</aside>

Footer <footer>

The footer landmark contains concluding information:

<footer>
    <p>&copy; 2024 Your Company</p>
    <!-- Footer content -->
</footer>

Best Practices for Using Landmarks

1. Use Semantic HTML

Always prefer semantic HTML elements over ARIA roles when possible:

<!-- Good -->
<main>
    <!-- Content -->
</main>

<!-- Less Preferred -->
<div role="main">
    <!-- Content -->
</div>

2. Label Multiple Landmarks

When using multiple instances of the same landmark, provide unique labels:

<nav aria-label="Main Navigation">
    <!-- Primary navigation -->
</nav>

<nav aria-label="Product Categories">
    <!-- Secondary navigation -->
</nav>

3. Maintain a Clear Structure

Landmarks should follow a logical structure:

<body>
    <header>
        <nav aria-label="Main">
            <!-- Navigation -->
        </nav>
    </header>
    
    <main>
        <!-- Main content -->
        <aside>
            <!-- Complementary content -->
        </aside>
    </main>
    
    <footer>
        <!-- Footer content -->
    </footer>
</body>

4. Avoid Empty Landmarks

Ensure each landmark contains meaningful content and at least one heading:

<main>
    <h1>Welcome to Our Site</h1>
    <!-- Content -->
</main>

Common Mistakes to Avoid

  1. Using multiple <main> elements on a single page
  2. Nesting landmarks incorrectly
  3. Forgetting to label multiple instances of the same landmark
  4. Using unnecessary landmark roles
  5. Omitting essential landmarks like <main> and <nav>

Testing Landmarks

You can test your landmark implementation using:

Remember

  • Use semantic HTML elements whenever possible
  • Include all essential landmarks (<header>, <main>, <nav>, <footer>)
  • Label multiple instances of the same landmark
  • Ensure landmarks contain meaningful content
  • Test with actual assistive technologies

Additional Resources