Reviewed November 6, 2026

Landmarks on a Storefront: Why Your Header, Nav, and Main Need Names

Landmarks are the named regions a screen reader offers as a table of contents: header, navigation, main, footer. When your storefront has three nav elements with no labels and no main landmark at all, that table of contents is blank, and the shopper has to listen to the whole page in order.

A sighted shopper skims a page in seconds, jumping from the header to the product to the footer by eye. A screen reader user does the same thing with the landmark list, and when the list is empty or full of identical entries, the shortcut does not exist. The page is still readable, but the navigation is gone.

The five landmarks every storefront needs

Header, or banner, at the top, holding the logo and the search. Navigation, for the menus, with each one labeled so the list shows primary navigation, footer navigation, and account navigation as separate entries. Main, exactly one, holding the page content. Footer, or contentinfo, at the bottom. Search, where it exists, as its own region.

The count matters. One main landmark, because two mains leave the reader guessing which one holds the content. Every nav labeled, because three entries that all read navigation collapse into one useless line. The labels come from the theme, and they are usually a one-line change per template.

The labeling mistake that empties the list

The common failure is not missing landmarks. It is landmarks with no names. A theme that wraps every menu in a nav element and labels none of them produces a landmark list that reads navigation, navigation, navigation, and the screen reader user has no way to tell which one is the shop menu and which one is the footer. The fix is an aria-label on each nav, naming what it is.

The second failure is the missing main landmark, usually because the theme wraps the content in a div instead of a main element. The fix is the same kind of change: one tag, in the theme, checked once and verified after every update.

How to check in five minutes

Open the page in a screen reader and pull up the landmark list, or open the browser's accessibility tree and read the regions. It should read like a map: banner, navigation for the main menu, main for the content, contentinfo for the footer. If the list is empty, or if it reads navigation three times, the landmarks need names.

Frequently asked questions

What is a landmark in web accessibility?

A landmark is a named region of a page, like header, navigation, main, or footer, that a screen reader lists so users can jump between regions instead of listening to the whole page. Landmarks are the table of contents for a page.

How many main landmarks should a page have?

Exactly one. The main landmark holds the page's primary content, and a second one leaves the reader guessing which holds the real content. Everything else belongs in header, navigation, or footer landmarks.

Do landmarks help sighted users?

Not directly, since sighted users navigate by eye. They help everyone who uses a screen reader, a switch device, or any tool that reads the page structure. They also help search engines understand the page, which is a side benefit.

What WCAG criterion covers landmarks?

Criterion 1.3.1, Info and Relationships, requires the page structure to be available in the code, which includes landmarks. Criterion 2.4.1, Bypass Blocks, requires a way to skip repeated content, which landmarks provide alongside skip links.