Site Map

A site map is an HTML page that lists all the links on a website, organized by sections. It provides an overview of the site structure and serves as an alternative navigation method. Users who struggle to navigate through traditional menus find direct access to each page.

Your site has 200 pages, a mega dropdown menu, and a search engine. A user with cognitive difficulties is looking for a page whose exact name they don't know. The search engine doesn't help them. The mega menu confuses them. The site map, on the other hand, displays the entire structure on a single page.

#What the WCAG Expects

WCAG criterion 2.4.5 (level AA) requires at least two ways to locate a page within a site. The options include: navigation menu, search engine, site map, table of contents, and breadcrumb trail. A site map is not mandatory in itself, but it is one of the techniques recommended by the W3C (technique G63) to satisfy this criterion.

The RGAA incorporates this requirement in its section 12 (Navigation). A compliant site offers at least two systems among the three: navigation menu, site map, and search engine.

A point many overlook: the site map also satisfies criterion 2.4.8 (level AAA, location). It allows the user to situate a page within the overall architecture.

#HTML or XML: The Common Confusion

A site map and an XML sitemap are two distinct things. A site map is an HTML page, visible and intended for humans. An XML sitemap is a technical file that search engine robots read to index your pages. Having a sitemap.xml does not replace an HTML site map: Google will read it, your users will not.

A well-constructed HTML site map uses nested lists (<ul> and <li>) that reflect the actual hierarchy of the site:

<nav aria-label="Site Map">
  <h1>Site Map</h1>
  <ul>
    <li><a href="/services">Services</a>
      <ul>
        <li><a href="/services/audit">Audit</a></li>
        <li><a href="/services/training">Training</a></li>
      </ul>
    </li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

The <nav> tag with an aria-label allows screen readers to identify this area as a dedicated navigation section.

#The Phantom Site Map Trap

The W3C clarifies in technique G63: a site map is only valid if it is complete and up to date. A page added to the site but absent from the site map renders the latter useless. The same applies to broken links pointing to deleted pages.

The most common mistake: generate the site map once at launch, then never update it. Six months later, half the links lead nowhere.

#In Summary

A site map is a navigation page that lists all the links on your site in a structured way. Build it with nested HTML lists within a <nav> tag. Automate its updates so it always reflects the actual state of your site.