A landmark is a named region of a page that assistive technology can list and jump straight to, and there are eight of them. Banner, navigation, main, complementary, contentinfo, region, search and form. Modern HTML gives you most of them without any ARIA, with conditions worth knowing. The nav and main elements always produce one. The header and footer elements do it whenever they answer to the body, and they stop doing it once they sit inside an article, aside, nav, section or main. A plain wrapping div changes nothing, which is why the header inside a card built from divs is still announcing itself as the banner of your page. And section and form produce nothing at all unless you give them an accessible name. The one that earns its keep is main, because it is the sanctioned way to let somebody skip the navigation without a skip link, and fewer than half of home pages have one. Be careful how you sell the rest, though. Landmarks are the navigation people report using least, at 3.7% naming them as their first move on a long page against 71.6% for headings. They are a useful second mechanism rather than the main event.
In practice
Start with the one that pays. Wrap the main content in main, once per page, put the navigation in nav, and put the footer in footer at the top level of the document. That covers most of the value, and it means a screen reader user can reach your content without hearing the menu again on every page. The search element does the same job for a search form and has been widely available since October 2023, so a role attribute is no longer needed for it.
Where a role appears more than once, each instance wants its own label, supplied with aria-label or aria-labelledby, and the label should not repeat the role name. Two unlabelled nav elements announce as navigation and navigation, which is worse than having one, because now there is a choice with no information attached. There is one case where the same label on both is the better answer, and it is the one that keeps coming up. Two identical sets of pagination controls, one above a table and one below, are the same thing twice, so telling them apart helps nobody. The region role is the strict one. Anything carrying it has to have a label, and that is a must rather than a should.
The div-only page is now the minority rather than the norm, since 84.3% of home pages carry at least one landmark. What they mostly do not carry is the useful one, because only 46.1% have a main. So the common defect is not an absence of structure, it is structure that stops short of the part somebody would actually navigate to. Check yours for a main.
Why it matters
Landmarks and headings are the two ways round a page and they work best together, which is why the specification suggests putting a region's label inside a heading. On their own, landmarks are a minority strategy and worth building anyway. They cost nothing when the markup is right. And the third of people who use them often are relying on them to skip work you would otherwise make everybody repeat. Overselling them is the thing to avoid. A page with perfect landmarks and no headings has removed the route 71.6% of people reach for first.
Free, conditionally
A section wrapping your related articles produces no region landmark until you give it an accessible name. That is correct HTML and it is not a landmark, which is why the checker says you have three when the page looks like it should have six. The mistake runs the other way as well. Put a header inside a card built from divs and it is still a banner, because only an article, aside, nav, section or main ancestor takes that mapping away. A listing page of ten such cards now announces ten banners.
Where this shows up on the site
Related terms
- Semantic HTMLSemantic HTML means using HTML elements for what they mean rather than for how they look.
- Heading structureHeading structure is the h1 to h6 outline of a page, and for screen reader users it is the map.
- Skip linkA skip link is usually the first link on a page, often reading "Skip to main content", and hidden until it takes focus.
- Screen readerA screen reader is software that reads the screen out loud, or sends it to a braille display, for people who cannot see it.
- RoleA role is what kind of thing an element is, as reported to assistive technology.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.