Skip to content
a11y-examples

Shauna Keating

HCI 530 Advanced Accessibility

April 19, 2026

For a better experience, visit: https://shkeating.github.io/a11y-examples/page-regions/

Overview

HTML landmarks and page regions form the structural foundation of an accessible web experience. By programmatically defining distinct areas of a layout, developers provide a semantic map that assistive technologies can use to quickly orient users.

Establishing a robust structure empowers screen reader users to bypass repetitive links and jump straight to the content they care about. Furthermore, proper markup powers browser “reading modes” for mobile users and creates a clearer, more predictable flow for individuals with cognitive disabilities.

HTML5 natively supports several key landmark elements: <header>, <footer>, <nav>, <main>, and <aside>.

Comprehensive Example

Section titled “Comprehensive Example”
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpaceTeddy Inc. - Home</title>
</head>
<body>


    <header>
        <img src="logo.png" alt="SpaceTeddy Inc. Logo">
        <h1>SpaceTeddy Inc.</h1>
        <form role="search">
            <label for="site-search">Search the site:</label>
            <input type="search" id="site-search" name="q">
            <button type="submit" aria-label="Search">Search</button>
        </form>
    </header>


    <nav aria-label="Main Navigation">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/products">Products</a></li>
            <li><a href="/about">About Us</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>


    <main>
        <h2>Welcome to SpaceTeddy!</h2>
        <p>We create the galaxy's finest stuffed bears for aspiring astronauts.</p>


        <article>
            <h3>Featured Bear: The Apollo</h3>
            <p>Our best-selling bear comes with a tiny replica spacesuit.</p>
        </article>
    </main>


    <aside aria-labelledby="related-heading">
        <h2 id="related-heading">Related Links</h2>
        <ul>
            <li><a href="/history">History of Space Teddies</a></li>
            <li><a href="/materials">Our Synthetic Felt Paws</a></li>
        </ul>
    </aside>


    <footer>
        <p>&copy; 2026 SpaceTeddy Inc. All rights reserved.</p>
        <ul>
            <li><a href="/privacy">Privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
        </ul>
    </footer>


</body>
</html>

WCAG Considerations

Section titled “WCAG Considerations”