ARIA Role REGION

ARIA role region is assigned to a section of a page which contains sufficiently important information for the user. ARIA region should be used only when the particular section cannot be marked with landmark roles such as main, complementary, navigation etc. By providing role region to important content it would be easy for the user to navigate to the section.

<div role=”region”>

Section content comes here…

</div>

Along with role region, a brief description should be provided so that user knows purpose of the content present in the section. Developers/consultants can use aria-labelledby to associate the section with a visible label or text on the page. The visible label or text must be in heading tag h1 to h6 based on the hierarchy or should have role heading.

<div role=”region” aria-labelledby=”sectionHeader”>

<h3 id=”sectionHeader”>Feedback</h3>

Section content comes here…

</div>

Aria-label can also be used to convey the purpose of the content present in the section.

<div role=”region” aria-label=”feedback”>

Section content comes here…

</div>

NVDA or JAWS screen reader will announce a section as region only if it has role region as well as aria-labelledby or aria-label to describe the content present in the section.

References:

• https://www.w3.org/WAI/GL/wiki/Using_the_region_role_to_identify_a_region_of_the_page
• https://www.w3.org/TR/wai-aria-1.1/#region