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.
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
<: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.
<h3 id="modheader">Module Header</h3>
<div class="bd">Module content</div>
Sample module with role="module"
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.