Landmark cheatsheet

HTML5 landmarks and their ARIA equivalent.

<body>
<header> role="banner" often containing company logo, service navigation and <form role="search"></form>
<nav> role="navigation"
<main> role="main"
  • <article> role="article" (is not a landmark!)
    • <section> role="region" requires accessible name
      • <article> role="article" (is not a landmark!)
        • <header> (not banner role!)
        • <form> role="form" requires accessible name
        • <footer> (not contentinfo role!)
 <aside> role="complementary"
<footer> role="contentinfo"
</body>

Screenreaders

Every screenreader/browser combination might interpret landmarks differently.
To navigate through landmarks:

  • NVDA:D go to next landmark; NVDA+F7 for list of landmarks.
  • JAWS:R go to next landmark; Insert+Control+R for list of landmarks.
  • VoiceOver:W (Quick Nav) go to next landmark; Control+Option+U to navigate to list of landmarks.

From MDN Web Docs

Use sparingly! Landmark roles are intended to be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.

Only use the region role if no other relevant content sectioning element or landmark role applies. If multiple regions exist on a page, it may be worth reinvestigating the page's overall structure.