Accessibility Development

ARIA Landmark Roles: A Way to Make Your HTML Feature-Rich

ARIA landmark roles create a navigable map of your web page for assistive technologies. Here are the eight landmarks, how to implement them correctly, and the common mistakes to avoid.

amejia

Jan 7, 2026 · 3 min read

ARIA landmark roles create a structural map of your web page that assistive technologies can navigate. Think of them as signs in a building — “This is the lobby,” “This is the main office,” “This is the exit.” Without them, navigating a web page with a screen reader is like navigating a building with no signs and no floor plan.

The good news: if you’re using semantic HTML, you already have most landmarks. The bad news: most developers don’t use semantic HTML consistently, so landmarks are missing, duplicated, or misapplied. Let’s fix that.

The Eight Landmark Roles

banner (implicit in header)

The site-wide header. Logo, primary navigation, search. There should be exactly one per page. If you’re using <header> as a direct child of <body>, the browser applies role="banner" automatically.

navigation (implicit in nav)

Groups of navigation links. You can have multiple — just label them distinctly. <nav aria-label="Primary"> and <nav aria-label="Footer"> let screen reader users distinguish between navigation regions.

main

The primary content of the page. There must be exactly one. Everything that isn’t header, footer, or sidebar goes here. This is the landmark screen reader users jump to when they want to skip directly to the content.

complementary (implicit in aside)

Supporting content that’s related to but separate from the main content. Sidebars, related links, “About the author” sections. It should make sense on its own but complement the main content.

contentinfo (implicit in footer)

The site-wide footer. Copyright, legal links, secondary navigation. Like banner, there should be one per page.

search

A region that contains a search facility. Wrap your search form in <search> (HTML5) or use role="search" on the containing element.

form

A region containing a form — but only when the form has a specific purpose beyond search. Give it an accessible name with aria-label or aria-labelledby.

region

A generic landmark for content that’s important enough to be navigable but doesn’t fit the other roles. Use sparingly and always with an accessible name. A <section> with an aria-label becomes a region landmark.

Common Mistakes

No landmarks at all. A page built entirely with <div>s has zero landmarks. Screen reader users can’t navigate structurally at all.

Multiple banners/contentinfos. Nesting <header> inside <article> doesn’t create a banner landmark (it only applies at the body level), but developers sometimes add role="banner" to section-level headers. Don’t.

Unlabeled duplicate landmarks. Two <nav> elements without aria-label are indistinguishable to screen readers. Always label duplicates.

Over-landmarking. Not every section needs to be a landmark. If a section doesn’t warrant direct navigation, leave it as a plain <section> or <div>.

Testing Your Landmarks

The fastest way to test: install the Landmarks browser extension, or open the Accessibility tab in Chrome DevTools. Both show you a visual overlay of all landmarks on the page. You should see a clear, logical structure: banner at the top, navigation, main content in the middle, complementary sidebar if present, contentinfo at the bottom.

If your page looks like a flat list of unnamed regions — or worse, has no landmarks at all — you have 15 minutes of work that will dramatically improve the experience for screen reader users. Semantic HTML elements give you landmarks for free. Use them.

ARIA Screen Readers Semantic HTML