WAI-ARIA: Role=Region

A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.

Description

A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.

Authors SHOULD limit use of the region role to sections containing content with a purpose that is not accurately described by one of the other landmark roles, such as main, complementary, or navigation.

Authors MUST give each element with role region a brief label that describes the purpose of the content in the region. Authors SHOULD reference a visible label with aria-labelledby if a visible label is present. Authors SHOULD include the label inside of a heading whenever possible. The heading MAY be an instance of the standard host language heading element or an instance of an element with role heading.

Assistive technologies SHOULD enable users to quickly navigate to elements with role region. Mainstream user agents MAY enable users to quickly navigate to elements with role region.

Role=Region Example

Using section[aria-labelledby] attribute

<div role="main">
<h1>title for main content area<h1>
<div role="region" aria-labelledby="region1">
<h2 id="region1">title for region area 1</h2>
... content for region area 1 ...
</div>
<div role="region" aria-labelledby="region2">
<h2 id="region2">title for region area 2</h2>
... content for region area 2 ...
</div>
</main>

HTML5 Example: Using section[aria-labelledby] attribute

Use the HTML5 section element to define a region landmark.

Defines a label for each region using exsiting content on the page.

<main>
<h1>title for main content area<h1>
<section aria-labelledby="region1">
<h2 id="region1">title for region area 1</h2>
... content for region area 1 ...
</section>
<section aria-labelledby="region2">>
<h2 id="region2">title for region area 2</h2>
... content for region area 2 ...
</section>
</main>

HTML5 Example: Using section[aria-label] attribute

Defines a label for each region using attribute value that is only visible to assistive technologies.

<main>
<h1>title for main content<h1>
<section aria-label="title for region area 1">
<h2>title for region area 1</h2>
... content for region area 1 ...
</section>
<section aria-label="title for region area 2">
<h2>title for region area 2</h2>
... content for region area 2 ...
</section>
</main>

HTML5 Example: Using section[title] attribute

Defines a label for each region using attribute value that maybe available as a tooltip on some browsers.

<main>
<h1>title for main content<h1>
<section title="title for region area 1">
<h2>title for region area 1</h2>
...content for region area 1...
</section>
<section title="title for region area 2">>
<h2>title for region area 2</h2>
...content for region area 2...
</section>
</main>

Characteristics

Superclass Role

• landmark

Related Concepts

• HTML frame
• section

Inherited States and Properties

• aria-atomic
• aria-busy (state)
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription

Name From

• author

Accessible Name Required

• True

Semantic HTML

Use the HTML5 <section> tag.

<section role=”contentinfo” aria-label=”What kind of Axeman are you?”>
<h2>What kind of Axeman are you?</h2>
<p>Are you a Fender guy or a Gibson gal? Well if it’s good enough for Jimi, it’s good enough for me!</p>
<p>[…]</p>
<h3> The first Fender Guitars</h3>
<p>[…]</p>
</section>In order to make the structure more accessible to user agents that support ARIA as well as ensuring that user agents that don’t support HTML5 can also understand the structure, adding the ARIA role=”contentinfo” with a corresponding aria-label that describes the section is advised.

Reference

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=region.