Using the region role to identify a region of the page

Status

Accepted as amended by WCAG WG http://www.w3.org/2014/05/06-wai-wcag-minutes.html Added to XML as ARIA20

Applicability

Technologies that support Accessible Rich Internet Applications

This technique relates to:

• Success Criterion 1.3.1 (Info and Relationships)
  • How to Meet 1.3.1
  • Understanding 1.3.1

User Agent and Assistive Technology Support Notes

• Landmark navigation works with JAWS 14/15 for region role. JAWS announces the start and end of the region as one navigates in and out of it.
• Landmark navigation works with NVDA 2014.2 in Firefox for region role. NVDA announces the start and end of the region as one navigates in and out of it.
• VoiceOver with Safari on OSX exposes the region role but the region is not navigable as a landmark
• VoiceOver with Safari on iOS does not recognize "region" role as a landmark

Description

This technique demonstrates how to assign a generic "region" role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The "region" role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see ARIA11).

It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using aria-labelledby, aria-label, or another technique. Doing so helps to better expose content and information relationships on the page. The role of region should be used prudently, because if overused they can make the page overly verbose for screen reader users.

Examples

Example 1

A section on the home page of a news website that contains a poll that changes every week is marked up with role="region". The h3 text above the form is referenced as the region's name using aria-labelledby.

<div role="region" aria-labelledby="pollhead">
<h3 id="pollhead">This week's Poll</h3>
<form method="post" action="#">
  <fieldset>
    <legend>Do you believe the tax code needs to be overhauled?</legend>
    <input type="radio" id="r1" name="poll" />
    <label for="r1">No, it's fine the way it is</label>
    <input type="radio" id="r2" name="poll" />
    <label for="r2">Yes, the wealthy need to pay more</label>
    <input type="radio" id="r3" name="poll" />
    <label for="r3">Yes, we need to close corporate loopholes</label>
    <input type="radio" id="r4" name="poll" />
    <label for="r4">Changes should be made across the board</label>
  </fieldset>
</form>
<a href="results.php">See Poll Results</a>
</div>

Link to example #1

Example 2

A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a span marked up with region role. The heading for the region has role=heading and is included in the aria-labelledby that names the region. Link to example #2

<ol><li><a id="l1" href="#" aria-expanded="false" title="Show details" aria-controls="block1" >John Henry's Account</a><img src="images/panel_expand.gif" alt="" />
 <div id="block1" class="nowHidden" tabindex="-1" aria-labelledby="l1 cd1" role="region"><span id="cd1" role="heading" aria-level="3">Certificate of  Deposit:</span>
 <table>
 <tr><th scope="row">Account:</th> <td>25163522</td></tr>
 <tr><th scope="row">Start date:</th> <td>February 1, 2014</td></tr>
 <tr><th scope="row">Maturity date:</th><td>February 1, 2016</td></tr>
 <tr><th scope="row">Deposit Amount:</th> <td>$ 3,000.00</td></tr>
 <tr><th scope="row">Maturity Amount:</th> <td>$ 3,072.43</td></tr>
 </table>
 </div>
 </li>
 </ol>

Example 3

This example shows how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.

<div role="region" aria-label="weather portlet"> 
...
</div>

Resources

• The Roles Model (role=region)

Related Techniques

• ARIA11: Using ARIA landmarks to identify regions of a page
• ARIA12: Using role=heading to identify headings
• ARIA13: Using aria-labelledby to name regions and landmarks

Tests

Procedure

For each section marked up with role="region":

1. Examine the content and ensure that it is important enough to have an independent landmark
2. Ensure that a standard landmark role is not appropriate for this content
3. Check that the region has a programmatically determined name

Expected Results

• checks # 1, 2, and 3 are true