UX, Conversion & Accessibility

Landmark Roles

Landmark roles are semantic identifiers for major regions of a web page that help assistive technology users locate and navigate important content.

Common landmark types identify a page’s main content, navigation, banner, footer-like content information, search and complementary material. Native HTML elements can provide landmarks automatically: a suitable main element maps to the main landmark, and a nav element identifies navigation. ARIA landmark roles are useful where semantic HTML does not already express the intended structure.

A multi-section business website might have a site-wide header, one main content region, primary navigation and a footer. Giving distinct labels to multiple navigation regions helps screen-reader users distinguish the main menu from footer links. Adding landmarks to every small card creates clutter, and the literal role value “landmark” is not a valid substitute for a specific landmark role.

Landmarks organize regions, but do not replace meaningful headings, accessible link names or keyboard functionality. The topic should not be confused with decorative page sections or CSS layout classes. During testing, inspect the accessibility tree and navigate by landmark with a screen reader; verify that the order and labels match what visitors actually encounter.