Landmarks (<header>, <main>, <footer>, <aside>, <form>, <nav>, <section>)

When To Use 

Landmarks help identify a webpage‘s structure and organization. This enables screen reader users to navigate through the structure of the page using a keyboard. ¹

Rules

• Place all perceivable content in a meaningful landmark to avoid missing content in complex web content. ¹
• When using the same landmark role multiple times on a webpage, each instance should have a unique label. ¹
  • To label an area, you can refer to a heading element (h1-h6) at the start of that area using the "aria-labelledby" attribute. ¹
  • If an area does not have a heading element, provide a label using the aria-label attribute. But avoid the landmark name inside the label text, since this information is already conveyed. ¹
• Don‘t overuse landmarks. Only add them if they improve the accessibility of your website. ¹¹

The following defines a list of landmark roles and html elements that define this role:

Banner Role: <header>

• <header> defines a banner role, except when placed inside a <article>, <aside>, <main>, <nav> or <section> element. ²
• A banner landmark, usually found at the top of each page, identifies site-related content like the logo or a site-wide search often called the header. ²
• Only include one <header> element that defines a banner landmark. Except for, when using multiple document or application roles, for example through the use of iframes. In this case make sure, to label each banner. ²
• Should not be nested inside other landmarks (be top-level). ²
• The banner landmark can only include a big heading and/or logo or alternatively also the search and/or navigation. This mainly comes down to what makes more sense in each specific case and the preference of the developers and users. You may want to survey your users what they find more intuitive. ¹⁴

Main Role: <main>

• <main> defines a main role. ⁶
• The main landmark identifies the main content of the page. ⁶
• Should not be nested inside other landmarks (be top-level). ⁶
• Only include one <main> element that defines a main landmark. Except for, when using multiple document or application roles, for example through the use of iframes. In this case make sure, to label each main landmark. ⁶

Contentinfo Role: <footer>

• <footer> defines a contentinfo role, except when placed inside a <article>, <aside>, <main>, <nav> or <section> element. ³
• The contentinfo landmark, or footer, identifies standard information at the bottom of a webpage, such as copyright notices and policy links. ³
• Should not be nested inside other landmarks (be top-level). ³
• Only include one <footer> element that defines a contentinfo landmark. Except for, when using multiple document or application roles, for example through the use of iframes. In this case make sure, to label each contentinfo. ³

Complementary Role: <aside>

• <aside> defines a complementary role. ⁴
• The complementary landmark is a supporting section of the document that‘s intended to complement the main content. It should retain its meaning even when separated from the main content. Otherwise a different role like the region role should be considered. ⁴
• Should not be nested inside other landmarks (be top-level). ⁴
• If multiple complementary roles are included on the page label each one. ⁴
• Example use cases:
  • On a page that summarizes the plot of a movie the <aside> element could be use for a sidebar, that contains additional background information like starring actors and the release date, etc..
  • An info box inside the text content of a page, that contains some additional information that is not essential to the main content. This info box must not be inside the main landmark (e.g. <main> element).
  • The website of an animal shelter utilizes the <aside> tag to structure a positive testimonial from a satisfied customer who had an enjoyable experience with the animal rescue.

Form Role: <form>

• <form> defines a landmark, if it has an accessible name, which can be achieved by using aria-labelledby (preferred) or aria-label attributes. ⁵
• Don‘t overuse landmarks. So only label forms if it has a benefit to the user. If the form is the main content on one page, then creating a landmark for the form is unnecessary. ¹¹
• Label forms uniquely when using multiple forms on the same page. ⁵
• The form role signifies a portion of a document that comprises dynamic components for transmitting data. ¹⁰
• If a form is used solely for search purposes, it‘s better to use the search landmark instead of the form landmark. ⁵

Navigation Role: <nav>

• <nav> defines a navigation role. ⁷
• Navigation landmarks serve the purpose of identifying specific groups of links, such as lists, that are intended for navigation within a website or page. ⁷. This can include the main navigation inside the header, links in the footer, a sidebar navigation or breadcrumbs.
• It is important that each navigation landmark on a page has a distinct label. Except when multiple navigation landmarks has the exact same links inside of them. In this case use the same label twice. ⁷

Region Role: <section>

• <section> defines a region role, if it has an accessible name, which can be achieved by using aria-labelledby, aria-label, or title attributes. ⁸
• A region landmark is a visible webpage portion with significant information related to a specific purpose. It is important enough to be included on summaries of the page and be easily accessible for users. ⁸ The region landmark role‘s content should make sense if separated from the main content of the document. ¹²
• Examples for the region role:
  • The home page of a news website features a segment with a weekly rotating poll. ¹³
  • Logged-in users of a bank website can expand links to view deposit account details. ¹³
• Region landmarks can be utilized to identify content that is not adequately described by named landmarks. ⁸
• Each region must have unique label. ⁸

Search Role:

• A search landmark is made up of multiple items and objects that work together to provide search functionality for the website‘s content. ⁹
• Use this role by creating a <form> element and adding the role="search" attribute to it. ⁹

Sources 

1. W3C: ARIA Landmarks Example: General Principles by W3C ARIA Task Forces is licensed under W3C Document License
2. W3C: ARIA Landmarks Example: Banner Landmark by W3C ARIA Task Forces is licensed under W3C Document License
3. W3C: ARIA Landmarks Example: Contentinfo Landmark by W3C ARIA Task Forces is licensed under W3C Document License
4. W3C: ARIA Landmarks Example: Complementary Landmark by W3C ARIA Task Forces is licensed under W3C Document License
5. W3C: ARIA Landmarks Example: Form Landmark by W3C ARIA Task Forces is licensed under W3C Document License
6. W3C: ARIA Landmarks Example: Main Landmark by W3C ARIA Task Forces is licensed under W3C Document License
7. W3C: ARIA Landmarks Example: Navigation Landmark by W3C ARIA Task Forces is licensed under W3C Document License
8. W3C: ARIA Landmarks Example: Region Landmark by W3C ARIA Task Forces is licensed under W3C Document License
9. W3C: ARIA Landmarks Example: Search Landmark by W3C ARIA Task Forces is licensed under W3C Document License
10. MDN: <form>: The Form element by Mozilla contributors is licensed under CC-BY-SA 2.5
11. MDN: ARIA: form role by Mozilla contributors is licensed under CC-BY-SA 2.5
12. MDN: ARIA: region role by Mozilla contributors is licensed under CC-BY-SA 2.5
13. W3C WAI: Using the region role to identify a region of the page by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
14. In HTML5, should the main navigation be inside or outside the <header> element?