Skip to main content
Back to Blog

ARIA Landmarks: Fencing Your Digital Acreage

By Brent Passmore 3 min read

Updated

The invisible map

Sighted users navigate a web page visually. They see the header at the top, the sidebar on the left, the main content in the center. These spatial relationships are obvious from the layout. Screen reader users don't have that luxury. Without structural markup, every page is a single continuous stream of content: no sections, no boundaries, no way to skip ahead.

ARIA landmarks are the fence posts. They divide your digital acreage into named regions that assistive technology can announce, list, and jump between.

Semantic HTML does most of the work

The good news: if you're using semantic HTML elements, you already have landmarks. The browser maps them automatically:

  • <header> maps to the banner landmark
  • <nav> maps to the navigation landmark
  • <main> maps to the main landmark
  • <footer> maps to the contentinfo landmark
  • <aside> maps to the complementary landmark
  • <form> and <section> map to landmarks when they have an accessible name

This is why semantic HTML matters beyond theory. Every <div> you use where a semantic element would work is a fence post you didn't plant, a boundary that assistive technology can't detect.

When to add ARIA roles explicitly

Explicit role attributes become necessary when semantic HTML isn't an option (legacy markup, CMS constraints, or complex component libraries that wrap everything in divs). A <div role="navigation"> is functionally equivalent to a <nav> for assistive technology, though the semantic element is always preferred when possible.

The key rule: every page should have exactly one main landmark, at least one navigation landmark, and a banner and contentinfo landmark at the top level.

Label your regions

When a page has multiple navigation regions (a primary nav, a footer nav, a sidebar nav), each one maps to the navigation landmark. Without labels, a screen reader user hears "navigation, navigation, navigation" and has no idea which is which.

Fix this with aria-label:

  • <nav aria-label="Primary">
  • <nav aria-label="Footer">
  • <nav aria-label="Blog categories">

Now the landmarks list reads "Primary navigation, Footer navigation, Blog categories navigation." The user can jump directly to the one they need.

The landmarks audit

Pull up your site in a screen reader and press the landmarks shortcut (in NVDA it's the D key, in VoiceOver it's the rotor set to landmarks). What you see is what your keyboard-dependent users see. Is the structure clear? Can someone jump from the nav to the main content without tabbing through forty links? Can they find the footer without scrolling through the entire page?

eiSEO checks for missing landmarks and duplicate unlabeled regions as part of its accessibility scan. But the screen reader test tells you something no automated tool can: whether the structure actually makes sense to a human navigating it.

Good fences make good neighbors

Robert Frost wrote it about stone walls, but it applies just as well to digital architecture. Clear boundaries help everyone navigate with confidence: sighted users through visual design, screen reader users through landmarks. Plant the fence posts. Label the gates. Make sure every visitor knows where they are and how to get where they're going.

Navigating with landmarks.

What are ARIA landmarks?

ARIA landmarks are roles assigned to page regions that help screen reader users navigate directly to major sections of a page. The main landmark roles are banner (header), navigation, main, complementary (sidebar), contentinfo (footer), search, form, and region. Most can be communicated through semantic HTML elements like header, nav, main, aside, and footer.

Should I use ARIA roles or semantic HTML elements?

Prefer semantic HTML elements first. A nav element automatically communicates the navigation landmark role. A main element communicates the main landmark role. Add explicit ARIA roles only when semantic elements are not available or when you need to support older assistive technology that may not recognize HTML5 elements.

How many landmarks should a page have?

Every page should have at least a banner, navigation, main, and contentinfo landmark. Use additional landmarks like complementary for sidebars and search for search forms. Avoid creating too many generic region landmarks, as this can overwhelm screen reader users with choices rather than helping them navigate efficiently.

More from the field

Heading Hierarchy: The Rows in Your Garden

Headings aren't just big text. They're the structural skeleton of your page: the rows and furrows that tell both humans and machines where one section ends and another begins.

4 min read

Skip Links and Focus Management: Clear Paths Through the Field

Imagine walking through a farm where you have to open every gate in sequence before reaching the barn. That's what keyboard users experience without skip links and proper focus management.

4 min read