A sitemap is a page that lists all or most of the pages available on a website as clickable links. It reflects the site’s hierarchy of sections and subsections, providing an overview that neither the main menu nor the search bar can offer on its own. For visitors who can’t find what they’re looking for within two clicks, this page provides a direct shortcut to the content they need.
Keyboard accessibility and sitemaps: an often-overlooked technical requirement
Most sitemap guides focus on SEO or visual structure. Before discussing navigation, it’s important to check that the sitemap works for everyone, including users who navigate without a mouse.
The W3C reminds us that interactive elements must be keyboard-accessible and that focus must remain visible. For a sitemap that may contain hundreds of links, this means every link must be reachable using the Tab key, and users must be able to clearly identify which link is selected at all times.
A sitemap whose links have no visible focus style (a removed CSS outline or a color identical to the surrounding text) is unusable with a keyboard. Visitors press Tab without knowing where they are in the list. On the Allo Papa sitemap, sections are arranged in a tree structure, making it easier to follow sequentially as well as visually.
The WCAG 2.2 also specifies that a sitemap must not be the only way to locate a page. It complements the main navigation, internal search, and breadcrumbs. If a site’s menu is poorly designed, adding a sitemap won’t solve the underlying problem.
HTML sitemap structure: what actually helps visitors
An effective sitemap relies on a well-defined HTML structure. Links are grouped into nested lists (ul and li tags) that mirror the site’s actual hierarchy. The first level corresponds to the main sections, the second to subcategories, and the third to individual pages.
This nesting has a dual benefit. Visitors can see how the site is organized: product pages are under the catalog section, articles under the blog section, and legal notices under the information section. Assistive technologies, such as screen readers, also interpret this hierarchy and announce the nesting level.
Difference between an HTML sitemap and an XML sitemap
An XML sitemap is intended for search engine crawlers (Googlebot, Bingbot). It contains technical metadata, such as the date a page was last modified or its estimated update frequency. Human visitors don’t access it through their browser.
An HTML sitemap, on the other hand, is a standard web page that anyone can read. It supports human navigation. Both formats can coexist on a well-configured site, but they serve different purposes:
- An XML sitemap tells search engines which pages to crawl and how fresh they are via the lastmod field (Google now ignores the priority and changefreq fields)
- An HTML sitemap helps visitors find a page without using the menu, search, or a contextual link
- A large website (e-commerce or media) needs both: XML for comprehensive crawling and HTML to help users find their way around
Website navigation: when a sitemap is truly useful
On a site with fewer than ten pages, the menu is enough. Sitemaps are most useful on sites with hierarchies more than three levels deep or content that changes frequently.
Here are three situations in which visitors might turn to a sitemap:
- Internal search returns no relevant results, often because the search term doesn’t match the site’s terminology
- The menu shows only part of the site’s hierarchy (common on mobile, where submenus are hidden by default)
- Visitors want to explore the breadth of the site without a specific goal, for example, to assess the size of a catalog or the range of topics covered by a blog
A well-structured sitemap makes up for the limitations of menus and search. It replaces neither, but provides a safety net when both mechanisms fail.
Consistent navigation across pages: what a sitemap can’t fix
The WCAG recommends that navigation elements repeated across multiple pages appear in the same order. A menu that changes structure from one section to another can disorient visitors, even when a complete sitemap is available.
A sitemap reflects the hierarchy, but doesn’t create a successful information architecture on its own. If the site’s categories overlap, or the same content appears under two different sections without a redirect, the sitemap will reproduce that inconsistency.
Before creating or redesigning a sitemap, check three things first:
First, make sure every page on the site can be reached within three clicks from the homepage. Next, ensure the main menu reflects the same sections as the sitemap. Finally, make sure the link labels in the sitemap exactly match the titles of their destination pages to avoid confusion.
The footer link still matters
Adding a link to the sitemap in the footer ensures it’s accessible from any page. This convention is common enough that visitors know where to look. A footer link, an up-to-date sitemap, and correctly marked-up nested lists: these three elements are enough to make a site easy to navigate, even when its structure is complex.
A sitemap remains a supplementary navigation tool, not a substitute for a clear architecture. Its real strength comes into play when the menu, search, and breadcrumbs are already working well: it then adds an overall layer of clarity that the other mechanisms, by their nature, can’t provide.
