Landmarks

Landmarks are structural areas used to designate major sections of a webpage. Screen readers expose landmarks so users can jump directly to them without navigating through all content first.

Native elements such as <header>, <nav>, <main>, <aside> and <footer> carry implicit landmark roles and should always be preferred over adding role attributes to generic elements.

Accessibility Features

  • <header> identifies the banner region for the page or its nearest sectioning ancestor such as an <article>. The page header typically contains the site name and global navigation.
  • <nav> identifies a navigation landmark. When multiple <nav> elements are present, each should have a unique accessible name via aria-label or aria-labelledby to distinguish their purpose.
  • <main> identifies the primary content of the page. Each page should have only one <main> element.
  • <aside> identifies complementary content that supports but is not essential to the main content.
  • <footer> identifies the contentinfo region for the page or its nearest sectioning ancestor such as an <article>. The page footer typically contains copyright information and secondary links.
  • <section> becomes a region landmark only when it has an accessible name via aria-label or aria-labelledby referencing its heading. Without a name it is treated as a generic container.
  • A skip link is the first focusable element on the page and lets keyboard users jump directly to the main content, bypassing repeated navigation.

Example

Code Snippet