Use ARIA Region For Modules

This post originally appeared on the Yahoo! Accessibility blog.

As web pages become more interactive, there is a need for adding semantic information about our content. ARIA landmarks let us define the sections of our web page and their purpose.

screenshot with ARIA landmarks outlinedARIA landmarks

The Yahoo! home page with possible pre-defined ARIA landmarks

There are several benefits to using ARIA:

• Enhances document semantics and browsing
• High-level document structure/layout will be perceived by users of screen readers
• Screen readers provide keyboard shortcut for moving between landmarks

There is already a long list of pre-defined ARIA landmarks that you can begin using on your web site. If you want to define a module on your page that does not fit into a pre-existing role you can use the generic role="region". This article discusses how to use the region landmark role.

Standard module format

The Yahoo! User Interface Library uses a standard module format. This common pattern for divs and classes make it easier to move modules from one page, section, or even web site to another.

Web pages have moved from a document format to a collection of modules. While we can easily use ARIA to add landmarks to the most common modules, i.e. navigation or search forms, it would be nice to let the user the purpose of each module on the page. This article will show you how to use role="region" to define the modules on a page.

Basic module pattern

The basic module pattern includes a parent div with class="mod". If the module has a header, add a div with class="hd". The body div has class="bd" and the optional footer has class="ft". You should at least have a body div. This may seem like you are adding extra divs, but they provide additional hooks for CSS and JavaScript that allows localized customization.

<div class="mod">
<div class="hd">
<h3>Module Header</h3>
&lt:div class="bd">Module content </div>

Adding ARIA to the module

Adding ARIA's role="region" defines the module as a region landmark and defines it as a self-contained chunk of content. We will also assign the h3 as the title of the module by using the aria-labelledby attribute.

<div class="mod">
<div class="hd">
<h3 id="modheader">Module Header</h3>
<div class="bd">Module content</div>

Sample module with role="module"

This text will be announced as the landmark header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas pulvinar tellus, vitae fermentum elit semper eu. Donec non erat tellus, in volutpat lectus. Sed sit amet auctor nisl. Suspendisse potenti.

What you can do

  • Add the standard ARIA landmarks to your page for navigation, main, search, etc.
  • Start using the role="region" landmark on modules that are extraneous to the page's purpose. For instance a related headlines module on a athlete's profile page.
  • It's worth noting this generic module landmark is not completely supported by every combination of screen reader and browser.