Landmark regions (ARIA landmarks)

Landmark regions are page areas marked up with WAI-ARIA roles such as banner, navigation, main and contentinfo, which screen reader users can jump to directly. Screen readers expose these roles through dedicated keyboard commands and overview lists; that takes a person straight from the page header to the main content. WAI-ARIA defines eight landmark roles: banner, complementary, contentinfo, form, main, navigation, region and search. The role attribute is rarely needed for this, because HTML elements carry the roles implicitly: header maps to banner, nav to navigation, main to main, footer to contentinfo. The roles banner and contentinfo are designed for one region per page. The elements header and footer only count as landmarks when they are not nested inside article, aside, main, nav or section. Where a role appears more than once, say two navigations, each needs its own label via aria-label. The limit of the pattern: landmarks only help where assistive technology surfaces them. Anyone navigating by keyboard without a screen reader notices nothing of them; skip links therefore remain necessary.

In practice

Build the basic structure with semantic HTML: one header, one nav, one main and one footer, each directly inside body. Keep the role attribute for cases without a matching HTML element; for search forms, HTML now offers a dedicated search element. Following the ARIA Authoring Practices, all perceivable content should sit inside a landmark region; whatever stays outside never shows up in the regions overview. The typical mistake is two unlabelled navigations: the main menu and the footer links both announce themselves merely as “navigation”. Assign descriptive names with aria-label, for instance aria-label="Main menu". The word “navigation” does not belong in the label, because screen readers announce the role anyway. To check, start a screen reader and open the list of regions: every region should appear there with a recognisable name, and nothing important may sit outside. Add skip links for everyone working by keyboard without a screen reader.

Matching service

Sources

← Back to the glossary