ARIA Landmarks

ARIA landmarks are roles that define the major navigational regions of a page.
Screen reader users can jump between landmarks — similar to sighted users scanning
the page visually — making them one of the most important structural accessibility
features on any page.
^[1]

---

The landmark roles

Most landmarks are provided natively by HTML5 elements. Prefer the HTML element
over the ARIA role wherever possible.
^[2]

HTML element	Implicit ARIA role	Notes
header (top level)	banner	Only one per page at top level
nav	navigation	Use aria-label when multiple exist
main	main	One per page
aside	complementary	Supplementary content
footer (top level)	contentinfo	Only one per page at top level
section	region	Only when it has an accessible name
form	form	Only when it has an accessible name

---

Labelling landmarks

When a page contains more than one landmark of the same type — for example two
nav elements — each must have a unique accessible name so users can distinguish
between them.
^[1]

Use aria-label for a short inline name:

• nav aria-label="Primary navigation"
• nav aria-label="Breadcrumb"

Use aria-labelledby to reference a visible heading:

• section aria-labelledby="recent-heading" → h2 id="recent-heading"

---

Common mistakes

Empty landmarks. A landmark region with no content inside it confuses screen
readers. Ensure every landmark contains perceivable content.

Too many landmarks. Not every div needs a landmark role. Overuse dilutes the
value of landmarks for navigation.

Missing main. Every page should have exactly one main landmark. Without it,
keyboard users have no efficient way to bypass repeated navigation.
^[3]

Using role directly instead of HTML. Adding role="navigation" to a div works,
but nav is shorter, cleaner, and more robust. Prefer the element.

---

Testing landmarks

In NVDA, press D to move to the next landmark. In VoiceOver on macOS, use
the Web Rotor (VO + U) and select Landmarks. In JAWS, press R to navigate
landmarks.

The Accessibility Tree in browser DevTools (Chrome, Firefox) shows landmark roles
and their accessible names.
^[2]

---

References

1. W3C Web Accessibility Initiative. ARIA Landmarks Example. https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/ ↑
2. W3C Web Accessibility Initiative. Understanding Success Criterion 1.3.6: Identify Purpose. https://www.w3.org/WAI/WCAG22/Understanding/identify-purpose.html ↑
3. W3C Web Accessibility Initiative. WCAG 2.4.1: Bypass Blocks — Understanding SC. https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html ↑