• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact

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.

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-expanded (state)
  • 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

W3C (opens new window)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y