Using ARIA Landmark Roles With Grids

Using ARIA Landmark Roles with Grids is easy. Begin by configuring your layout, and then simply use the role attribute to define, as accurately as possible, the content of each section.

Presently there are seven different ARIA Landmark Roles to choose from:

• application
• banner
• complementary
• contentinfo
• main
• navigation
• search

In this example a template for a blog is created. The layout is simple, having a header, three columns, followed by a footer. The usage of the ARIA Landmark Roles is straightforward: The roles of banner and contentinfo are used for the header and footer. For the body of the Grid, the primary content section is indicated with a role of main, while the secondary content section is given a role of complementary. Lastly, the navigation and search functionality are indicated using the roles of navigation and search. Here is how the basic layout comes together: <div id="doc" class="yui-t1"> <div id="hd" role="banner"> <!-- Header --> </div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-gc"> <div role="main" class="yui-u first"> <!-- Main Content --> </div> <div class="yui-u"> <div id="search" role="search"> <!-- Search Functionality --> </div> <div id="news" role="complementary"> <!-- Secondary Content --> </div> </div> </div> </div> </div> <div role="navigation" class="yui-b"> <!-- Navigation --> </div> </div> <div id="ft" role="contentinfo"> <!-- Footer --> </div> </div> Note: Some ARIA Landmark Roles such as banner and main are only to be used once inside a section with a role of document or application applied. For more info on using the ARIA Landmark Roles consult both the ARIA Specification and corresponding Best Practices document.

In addition to improving the semantics of a Grid, use of the ARIA Landmark Roles significantly improve its navigability. For example, the JAWS screen reader will announce all of the ARIA Landmarks when a page is loaded, and allows users to quickly jump between them by pressing the semicolon key. The following video demonstrates this example running in Firefox 3, using the JAWS screen reader. In this video, the user navigates amongst each of the landmarks on the page, then cycles back to specific sections of interest.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.