Technique H101:Using semantic HTML elements to identify regions of a page

Applicability

Technologies that support ARIA (Accessible Rich Internet Applications).

This technique relates to 1.3.1: Info and Relationships (Sufficient).

Description

The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or "landmarks") programmatically identify sections of a page. Browsers don't expose landmarks directly to users, but they they are made available to them by assistive technology and browser extensions to help navigation to various sections of a page.

Landmarks provide an easy way for users of assistive technology understand the programmatic structure of a page and skip over content they're not interested in. For instance, if a site's header, global navigation, main content area, and footer are marked up as landmarks, a screen reader user can easily skip to the landmark they're interested in without having to work their way through all the preceding content. A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story, could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark.

Landmark regions are implicitly created when certain semantic HTML elements are used, which is different from using ARIA to explicitly create landmarks. These elements are:

<header>: When a header is a direct child of the body element, it creates a banner role, a region that typically contains the site's logo, name, and other persistent site-wide content at the top of a page.
<nav>: A region that contains navigation links to other pages or different parts of the same page.
<main>: A region that contains a page's main content.
<section>: A region that contains a generic section of a document or application. A section element isn't exposed as a landmark region unless it has an accessible name.
<form>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form element isn't exposed as a landmark region unless it has an accessible name.
<aside>: A region of the document that supports the main content, yet is separate and meaningful on its own.
<footer>: A region that, when its nearest ancestor is the body element, contains information about the page such as copyrights and links to privacy statements.

Modern web browsers don't need to have the HTML element's related ARIA role added to them to be exposed as a landmark region. For example, <main role="main"> is unnecessary, and should just be <main>.

There are cases when a particular landmark role can be used more than once on a page, for example, primary and secondary blocks of navigation. In these cases, identical roles should be labeled using a valid technique for labelling regions.

It is a best practice to include all content on the page in landmarks, so that screen reader users who rely on landmarks to navigate from section to section do not lose track of content.

Examples

Example 1: Simple landmarks

The following example shows how landmarks might be added to an HTML document:

<header> site logo and name, etc. here </header>
<form aria-label="site search"> search functionality here </form>
<nav> a list of navigation links here </nav>
<main> the page's main content here </main>
<section> a sponsor's promotion here </aside>
<aside> sidebar content here </aside>
<footer> site contact details, copyright information, etc. here </footer>

Example 2: Multiple landmarks of the same type and aria-labelledby

The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:

<nav aria-labelledby="site-nav-heading">
  <h2 id="site-nav-heading">Site</h2>
  <ul>
    <li><a href="/news">News</a></li>  
    <li><a href="/weather">Weather</a></li>
    <li><a href="/sport">Sport</a></li>
  </ul>
</nav>
<nav aria-labelledby="related-nav-heading">
  <h2 id="related-nav-heading">Related Topics</h2>
  <ul>
    <li><a href="/local-news">Local News</a></li>
    <li><a href="/local-weather">Local Weather</a></li>
    <li><a href="/local-sport">Local Sport</a></li>
  </ul>
</nav>

Example 3: Multiple landmarks of the same type and aria-label

The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:

<nav aria-label="Vehicles">
  <ul>
    <li><a aria-current="page" href="/cars">Cars</a></li>
    <li><a href="/trucks">Trucks</a></li>
    <li><a href="/bikes">Bikes</a></li>
  </ul>
</nav>
<nav aria-label="Tags">
  <ul>
    <li><a href="/cars-electric">Electric Cars</a></li>
    <li><a href="/cars-gas">Gas-powered Cars</a></li>
    <li><a href="/cars-family">Family Cars</a></li>
    <li><a href="/cars-working">Rugged Cars For Working</a></li>
    <li><a href="/cars-commuting">Cars For Suburban Commuting</a></li>
  </ul>
</nav>

Example 4: Search form

The following example shows a search form. A form element must have an accessible name to be exposed as a landmark area:

<form aria-labelledby="search-label">
  <label for="product-search" id="search-label">Search</label>
  <input id="product-search" placeholder="title, author, or ISBN" type="text">
  <button type="submit">Find Books</button>
</form>

Other sources

No endorsement implied.

Tests

Procedure

Examine each HTML element that creates a landmark role.
Examine whether the correct element has been used to mark up content. For example: a nav element has been used to mark up a section with navigation links, or the main element is used to contain the page's main content.
If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.

Expected Results

Checks 1, 2, and 3 are true.