Page Comparison

...

<div role="banner"></div>

Top-level landmarks

The following table shows the HTML5 structuring elements and corresponding landmark roles that should be at the top-level of your page structure - i.e. they should not be nested within other landmarks:

...

* Note: While the banner and contentinfo ARIA landmark roles should be top-level, the associated <header> and <footer> HTML5 sectioning elements do not take on the landmark role when they are children of one of the following elements: article, aside, main, nav, section. This means, for example, that you can continue to use these HTML5 sectioning elements within an <article> without interfering with the ARIA landmark roles of the page.

Landmarks that can be nested

The following table shows the HTML5 sectioning  elements and corresponding landmark roles that should be nested within other roles.

...

<header>
   <div   <div role="search" aria-label="site">
       <label       <label for="site-search">Search the site</label>
       <input
       <input id="site-search" type="text">
    <  </div>
</header>
<main>
   <form   <form role="search" aria-labelledby="address-search-label">
       <label
       <label id="address-search-label" for="address-search">Address Search</label>
       <input
       <input id="address-search" type="text">
   <   </form>
</main>

Note that the landmark role will be announced by screen readers. To avoid duplication, avoid using the landmark role in the label. In the previous code example, the site search has an aria-label of “site”, so it will be announced by a screen reader as “site search”. The address search is aria-labelledby “Address Search”, so it will be announced as “Address Search search”, causing unnecessary duplicate announcements.

...

• Each page should have one (and only one) <main> landmark. If an iframe introduces a second <main> landmark both should be uniquely labelled.

• Keep the total number of landmarks small. Ideally, 5 to 7.

• Strive to contain all page content within landmark regions.

• Use the search landmark in forms when the form is used for search functionality.

• If a page includes more than one type of landmark (e.g., multiple search landmarks), each should have a unique label.

• Use aria-labelledby or aria-label when labelling landmarks.

Resources

See W3C's ARIA Landmarks Example for recommendations and examples.

...