Landmarks

ARIA landmark roles divide a page into sections with clear purposes. Landmarks provide quick access to the major sections of a page (e.g. banner, main, footer), allowing non-visual users to navigate the page more easily.

Because some users will navigate by landmarks, best practice is to ensure all page elements and content are contained within landmark regions. This will help prevent users from missing content that falls outside of a landmark region.

Adding Landmarks

Many HTML5 sectioning elements have default landmark roles. Wherever possible, use the correct HTML5 element, rather than adding a landmark role to a semantically neutral element like a <div>.

E.g. for a page header, use the <header> element. If the <header> element can not be used for some technical reason, use a semantically neutral element like a <div>, with the banner landmark role applied. Although there is a strong preference for using the correct HTML sectioning element, the following two approaches will provide the same information to assistive technology:

<header></header>

or 

<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.

Labelling Landmarks

If a landmark role is used more than once on a page, each instance of that role should be labelled, using either the aria-label or aria-labelledby attribute. Generic landmarks (i.e. <section> elements or <div>s with role="region") should be labelled even if they are the only instance on the page.

For example, if a page had a site search component in the header, and an address search component in the main content area, each should be labelled, as in the following code example:

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

Too Much of a Good Thing...

The preference is to use as few landmark regions as possible while still conveying the gist of the entire screen. Typically not more than 5 to 7 landmark regions is ideal. This may grow for very complex pages and shrink for very simple pages.

Recommendations

Current best practice is:

• 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.

• Labelling landmarks example
• Search regions example

Deque - HTML 5 and ARIA Landmarks