A landmark is an ARIA role that identifies the main regions of a web page, such as the header, navigation, main content and footer, to assistive technologies. The most common landmark roles are banner, navigation, main, complementary and contentinfo. Screen reader users move quickly through a page via the landmark list. This programmatic structure relates to WCAG criterion 1.3.1.
Landmark roles are the equivalent of visually scanning a page: a sighted user distinguishes the menu, main content and footer at a glance, while a screen reader user gets the same map from landmarks. The core roles are banner (site header), navigation (menus), main (the page's main content), complementary (side content), contentinfo (footer), search and form. Modern HTML5 elements produce most of these roles automatically: when header, nav, main, aside and footer are used in the right places, no additional role attribute is needed. Screen readers turn landmarks into a navigation tool, letting users open a landmark list or jump region by region with shortcut keys.
A few rules make this experience work: a page should have a single visible main, all content should live inside a landmark region, and when the same role appears more than once, such as two navigation areas, each needs a distinguishing name via aria-label. Making structure programmatically determinable is the subject of WCAG success criterion 1.3.1 (Info and Relationships). The practical approach is semantic HTML first: header, nav, main and footer instead of stacks of divs, with the role attribute reserved as a fallback. Checking is simple: open your screen reader's landmark list and see whether the map of your page makes sense; automated accessibility scanners also catch issues such as a missing main or content outside any landmark.
Frequently asked questions
How many main landmarks should a page have?
There should be a single visible main. The main region marks the part of the page carrying its actual subject; more than one visible main makes a screen reader user's 'skip to main content' expectation ambiguous. The header, menus and footer stay outside main. In single-page applications the rule persists as views change: only one main should be active at a time.
Should you use HTML5 elements or the ARIA role attribute for landmarks?
Semantic HTML5 elements always come first: header, nav, main, aside and footer produce the corresponding landmark roles automatically and need no extra maintenance. The role attribute is a fallback for legacy code or custom components where a semantic element cannot be used. Repeating both on the same element is unnecessary; what matters most is giving each instance a distinguishing name via aria-label when the same role appears more than once.
This content is for information only and is not legal advice.