ARIA: Main role

Draft
This page is not complete.

{{ariaref}}

The main landmark role is used to indicate the primary content of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

<div id="main" role="main">
  <h1>Avocados</h1>
  <!-- main section content -->
</div>

This is the main section of a document that discusses avocados. Subsections of this document could discuss their history, the different types, regions where they grow, etc.

Description

The main role is a navigational landmark role identifying the main content of a document. Landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. By classifying and labeling sections of a page, structural information conveyed visually through layout can be represented programmatically. Screen readers use landmark roles to provide keyboard navigation to important sections of a page. For those navigating via landmark roles, the main role is an alternative for "skip to main content" links.There should only be one main landmark role per document.

The <main> element has a role of main. Developers should always prefer using the correct semantic HTML element over using ARIA.

Documents and applications can be nested in the DOM, which may lead to having more than one main element as DOM descendants. If this is the case, include aria-owns to identify the relationship of the main to it's document or application ancestor.

Example

<body>
  <!-- primary navigation -->

  <div role="main">
    <h1>The The First Indochina War</h1>
    <!-- article content -->
  </div>

 <!-- sidebar and footer -->
</body>

Accessibility concerns

Use only one main role per document

The main landmark role should only be used once per document.

If a document contains two main roles, say updating page content when triggered by JavaScript, the inactive main role's presence should be removed from assistive technology via techniques such as toggling the hidden attribute.

<main>
  <h1>Active <code>main</code> element</h1>
  <!-- content -->
</main

<main hidden>
  <h1>Hidden <code>main</code> element</h1> 
  <!-- content -->
</main>

Best practices

Prefer HTML

Using the <main> element will automatically communicate a section has a role of main. If at all possible, prefer using it instead.

Skip navigation

Skip navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeated content (main navigation, info banners, etc.). This allows the user to access the main content of the page faster.

Adding an id attribute to the element with a declaration of role="main" allows it to be a target of a skip navigation link.

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <div id="main-content" role="main">
    <!-- main page content -->
  </div>
</body>

Added benefits

Certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.

Specifications

Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'ARIA Navigtion Role' in that specification.
Recommendation
WAI-ARIA Authoring Practices
The definition of 'Navigation Landmark Role' in that specification.
Working Draft

Screen reader support

TBD

See also

Document Tags and Contributors

Contributors to this page: lanresmith, mdnwebdocs-bot, estelle, ericwbailey, yatil
Last updated by: lanresmith,