Project: A Multi-Page Accessible Site

Real websites have more than one page. This project builds a three-page site with consistent navigation and clean semantics.

Plan the Pages

Choose three pages: Home, About and Contact. Write one sentence describing the purpose of each. Keep the navigation identical on every page so visitors always know where they are.

Shared Structure

Every page uses the same landmarks: a header with navigation, a main for the unique content and a footer. Use aria-current="page" to mark the active link.

<header>
  <nav aria-label="Main navigation">
    <a href="index.html" aria-current="page">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main>
  <h1>Welcome</h1>
  <p>This is the home page of the site.</p>
</main>

<footer>
  <p>&copy; 2026 My Site</p>
</footer>

Relative Links

When pages sit in the same folder, link with just the file name: about.html. Use ../ to move up one folder. Absolute links start with https:// and point to another site.

Final Checks

• Every page has one h1.
• Images have meaningful alt text.
• The page works with the keyboard alone.
• Text has enough contrast against the background.
• Links describe their destination.

Practice

1. Create about.html and contact.html using the shared header and footer.
2. Add a skip link that jumps to the main content.
3. Check every page with the keyboard only.

Hands-on exercise

Create three pages: index.html, about.html and contact.html.
Each page must contain the same navigation with links to all three pages.
Each page must have one h1 and a main element.

Recap

Multi-page sites need consistent navigation, relative links and landmarks. Test with a keyboard before calling the site finished.