ARIA: region role
The region
role is used to identify document areas the author deems significant. It is a generic landmark available to aid in navigation when none of the other landmark roles are appropriate.
html
<div role="region" aria-label="Example">
<!-- region content -->
</div>
Description
The region
role is an ARIA landmark role.
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.
The region
landmark role's 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
oraria-label
-
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. If no visible appropriate header is present,aria-label
should be used.
Examples
html
<div role="region" aria-labelledby="region-heading">
<h2 id="region-heading">
This heading's `id` 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
Labeling landmarks
If there is more than one region
landmark role in a document, provide a unique label for each one. This label will allow an assistive technology user to be able to quickly understand the purpose of each landmark.
html
<div role="region" aria-labelledby="use-discretion">
<h3 id="use-discretion">Please use the `region` 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.
Specifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # region |
ARIA Authoring Practices # aria_lh_region |
See also
- The
<section>
element - region (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
- ARIA:
banner
role - ARIA:
main
role - ARIA:
contentinfo
role - ARIA:
complementary
role - ARIA:
navigation
role - Landmark roles: Using ARIA: Roles, States, and Properties
- Using WAI-ARIA Landmarks – 2013 | The Paciello Group
- Accessible Landmarks | scottohara.me