ARIA: Region role

The region landmark role is used to identify an area in the document that the author has identified as significant. It is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate.

<div role="region" aria-label="Example">
  <!-- region content -->
</div>

Description

The region role is an ARIA landmark role. Landmark roles provide a way to identify the organization and structure of a web page. By classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically. Screen readers use landmark roles to provide keyboard navigation to important sections of a page.

The region role should be reserved for sections of content sufficiently important that users will likely want to navigate to the section easily and to have it listed in a summary of the page. A region role is a more generic term, and should only be used if the section needing to be identified is not accurately described by one of the other landmark roles, such as banner, main, contentinfo, complementary, or navigation.

Every element with a region role should include a label that describes the purpose of the content in the region, preferably with an aria-labelledby referencing a visible header. If no visible appropriate header is present, aria-label should be used..

region landmark roles content should make sense if separated from the main content of the document.

Using the <section> element will automatically communicate a section has a role of region if it is given an accessible name. Developers should always prefer using the correct semantic HTML element, in this case <section>, over using ARIA.

Associated WAI-ARIA Roles, States, and Properties

aria-labelledby
Use this attribute to label the region. Often, the value of the aria-labelledby attribute will be the id of the element used to title the section.

Keyboard Interactions

None.

Required JavaScript features

None.

Examples

<div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">This heading's <code>id</code> attribute helps this region have an accessible name</h2>
  <!-- region content -->
</div>

Accessibility concerns

Use sparingly! Landmark roles are intended to be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.

Only use the region role if no other relevant content sectioning element or landmark role applies. If multiple regions exist on a page, it may be worth reinvestigating the page's overall structure.

Best practices

Prefer HTML

Using the <section> element will automatically communicate that a section has a role of region if it is given an accessible name. If at all possible, prefer using it instead.

Labeling landmarks

If there is more than one region landmark role in a document, provide a label for each one. This label will allow an assitive technology user to be able to quickly understand the purpose of each landmark.

<div role="region" aria-labelledby="heading">
  <h3 id="use-discretion">Please use the <code>region</code> role with discretion</h3>
  <!-- content -->
</div>

...

<div role="region" aria-labelledby="please-reconsider">
  <h3 id="please-reconsider">Please reconsider your document structure</h3>
  <!-- content -->
</div>

In this example, the region's label is being generated by the aria-labelledby attribute.

Scrolling content areas with overflow text

If there is a content area with tabindex="0", add role="region" to convey to screen reader users that is a generic region. This is done to allow keyboard-only users to scroll regions with overflow text.

SVG

role="region" can be declared on areas of SVG along with an aria-label to allow individual sections of the SVG to be described.

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 Region Role' in that specification.
Recommendation
WAI-ARIA Authoring Practices
The definition of 'Region landmark role' in that specification.
Working Draft

Screen reader support

TBD

See also