The W3C WAI-ARIA specification includes many components and techniques, but one of the simpler techniques to implement is adding landmarks to HTML documents.
Page Content
About ARIA Landmarks
Landmarks can be used to mark major sections or regions of a document such as a the main content, the top banner section or a footer.
Similar to headings, modern screen readers can compile a list of landmarks and then jump to different areas of a Web page or document. In HTML roles are indicated by including a ROLE (i.e.role="<foo landmark>") attribute in a DIV or sometimes the SPAN tag associated with the role.
In addition to the ROLE attribute, the tag designating a region can also include an additional aria-label attribute giving a more specific name to a region. See the HTML 5 section for information about how roles correspond to newer tags.
Defining Landmark Roles
Below are some common ARIA landmark roles and their definitions.
| Role Name | Definition |
|---|---|
| article | An individual news story or separate content area within the main section. "Articles" can also include comments. In some cases, articles can be nested. |
| banner | The section of page with branding information (e.g. logo, site title). This often located at the top of a page and called a "page heading." |
| complementary | Any content inserted into a page that is not related to the surrounding content. Another term used is "aside." Examples include highlighted quotes in an article or supplementary content (often in a separate box visually). |
| contentinfo | This section or region is usually at the bottom and typically contains information on copyright, webmaster contact and policy information. This is often called the "footer." |
| main | This is the region where the content unique to the page is placed. Another name for this area is "content." Almost all pages should have one and only one main region. Note: Some screen readers like JAWS 16+ have commands allowing viewers to bypass navigation. Eventually, marking this role would remove the need to include a separate Skip Navigation link. |
| navigation | Regions of the page which include navigation menus or links. A page can have more than one navigation area. |
| search | The area housing the search form or link to search. |
There are additional roles in ARIA, but these roles listed here are the most easily and widely supported.
Adding Landmarks in HTML
Below are some simple examples of how to add ARIA landmarks to HTML. In general, there is the most browser support for a ROLE attribute within either the DIV or SPAN tags. However, there is also support for pairing ARIA Landmarks with newer HTML 5 tags.
Adding a Banner Role
A simple example would be tagging the banner/top heading section DIV of a page with the attribute role="banner".
Below is a header for a typical Penn State informational site which includes a skip nav link, logo images and a site title "Creative Uses of Excel." The landmark is indicated with the attribute role="banner" included in the <div id="header"> tag.
Sample Page Header with Banner Role Attribute
The role="banner" attributes is placed in the initial DIV tag.
<div id="header" role="banner">
<a href="#menu" class="screenreader">Skip Header</a>
<img src="graphics/mark.gif" alt="Penn State University" width="100" height="70" />
<img src="graphics/longheader.gif" alt="Teaching and Learning with Technology" width="500" height="70" />
<p class="title">Creative Uses of Excel</p>
</div>
Adding Navigation Role
Another common role is role="navigation". If your navigation is presented as a list, the best practice is to place the UL in a DIV which has the role attribute as in the next example.
When ARIA Roles are used, they may override the default behavior of an element in unexpected ways. If they are restricted to neutral elements such as DIV or SPAN, the chances of adversely affecting how other elements are significantly reduced.
Sample UL Inside DIV with Navigation Role
<div id="menu" role="navigation">
<h2>Main Menu </h2>
<ul>
<li><a href="index.html">Home Page </a></li>
<li><a href="basics.html">Excel Basics</a></li>
<li><a href="enter.html">Enter Scores</a></li>
<li><a href="formulas.html">Calculate Grades</a></li>
<li><a href="appendix.html">Appendix: Formulas</a></li>
</ul>
</div>
ARIA-LABEL
If a Web page has multiple regions of the same type, you can use the ARIA-LABEL attribute to further specify a title for the REGION.
- For example a main menu NAVIGATION region could be specified with the code
<div id="main-menu" role="navigation" aria-label="Main Menu">. - Another use of the ARIA-LABEL could be to give a title to an COMPLEMENTARY (aside) region. For instance a call out with a set of Top 5 Tips could be coded as
<div role="complementary" aria-label="Top 5 Tips">. The DIV should also include a heading tag at the appropriate level as a secondary cue for people navigating by headings.
HTML 5 Tags vs. Landmarks
The HTML 5 specification has added tags such as HEADER, SECTION and FOOTER to also define commonly used page elements. Unfortunately, there is not always overlap between HTML 5 and ARIA. For now, it would be recommended to include an ARIA role even in these new HTML 5 tags.
See the reference chart and example below for details.
| ARIA Role | HTML 5 Tag | Function |
|---|---|---|
| article | ARTICLE | An individual news story or separate content area within the main section. "Articles" can also include comments. In some cases, articles can be nested. |
| banner | HEADER | The section of page with branding information (e.g. logo, site title). |
| complementary | ASIDE | Any content inserted into a page not related to the surrounding content (e.g. highlighted quotes in an article content in a colored box). |
| contentinfo | FOOTER | Usually at the bottom with information on copyright, webmaster contact and policy information. |
| main | MAIN | Where the main content is located. Pages typically should have one and only one main region. |
| navigation | NAV | Includes menus and blocks of links to other pages. A page can have more than one navigation area. |
| search | There is no special HTML 5 tag. The option of FORM with correct "Search" LABEL tag works in all screen readers. | The search form. |
Tags and Screen Reader Interpretation
In some screen readers like JAWS 16+, the HTML 5 tag is given the parallel ARIA role even without the ROLE attribute. That may not work in all screen readers, so specifying a role within the tag is still recommended. See examples below.
Sample Page Header with Banner Role Attribute
The role="banner" attributes is placed in the initial HEADER tag.
<header role="banner">
<a href="#menu" class="screenreader">Skip Header</a>
<img src="graphics/mark.gif" alt="Penn State University" width="100" height="70" />
<img src="graphics/longheader.gif" alt="Teaching and Learning with Technology" width="500" height="70" />
<p class="title">Creative Uses of Excel</p>
</header>
ARIA Landmark Scanning Tools
See the side list for a list of tools which scan for ARIA landmarks.
Skip Navigation
Many users on a screen reader prefer ARIA landmarks to skip repetitive navigation links. However, the skip link may still be needed for sighted users on a keyboard.
If it is not possible to modify a template to include ARIA landmarks, is possible to add the MAIN roles to individual content pages.
This can be done in the code view by adding <div role="main"> at the beginning of each page and </div> as the final tag of the page.