design hubs
On this page
Structure
2 min read

Landmark Regions

ARIA landmark roles divide a page into named regions — banner, navigation, main, and contentinfo — letting screen reader users jump directly to any area.

Landmarks are to a page what headings are to a document — they let users skip past content they do not need and jump directly to what they are looking for.

What landmarks are

Landmark regions are ARIA roles that identify the major sections of a page. Screen readers expose a landmarks list — similar to the headings list — from which users can jump directly to any labelled region. The primary landmarks correspond to native HTML5 elements: <header> maps to banner, <nav> maps to navigation, <main> maps to main, <aside> maps to complementary, and <footer> maps to contentinfo.

The essential set

Every page should have at minimum: a banner (the page header containing the logo and primary navigation), a navigation (the primary nav), and a main (the primary content area). Most pages also benefit from a contentinfo (the footer). These four regions give a screen reader user a complete orientational map of the page.

Multiple landmarks of the same type

When a page has more than one landmark of the same type — two navigation regions, for example — each must have a distinct label via aria-label or aria-labelledby. “Primary navigation” and “Breadcrumb navigation” are distinct regions. Two unlabelled <nav> elements are indistinguishable in the landmarks list and offer no navigational benefit.

A “skip to main content” link at the top of the page lets keyboard users bypass repetitive navigation. It should be the first focusable element on the page. It can be visually hidden until focused — appearing only when a keyboard user tabs to it — but it must be genuinely reachable and functional. It is not a substitute for landmarks; it is a complement to them.

Skip links serve two distinct groups of keyboard users with different needs. Screen reader users have the landmarks list as an alternative — they can jump directly to the main landmark without tabbing through the header, so skip links are a secondary benefit for them. Sighted keyboard-only users have no equivalent to landmark navigation; for this group the skip link is the primary mechanism to bypass repetitive content, and its absence means tabbing through the entire header on every page. Robust landmark structure reduces the navigation burden for screen reader users. Skip links remain necessary for sighted keyboard users regardless of landmark quality. Both mechanisms should be present.

The takeaway

Structure every page with semantic HTML elements that provide landmark regions. Label duplicate landmarks. Add a skip link as the first interactive element. These three steps together reduce the navigation burden for screen reader and keyboard users on every page of the site.

Practice

0 / 3

Keyboard shortcuts

Show shortcuts
?
Search
CtrlK
Previous article
Next article
Close
Esc