YUI Library Home

YUI Library Examples: Grids CSS: Using ARIA Landmark Roles With Grids

Grids CSS: Using ARIA Landmark Roles With Grids

The ARIA Landmark Roles improve the accessibility of layouts created using Grids by allowing developers to more accurately communicate to users of screen readers the intended purpose of each section of a document or application.

Note: To use this example, you'll need both a screen reader that supports the ARIA Landmark Roles (such as JAWS 10) as well as a browser that supports ARIA (such as Firefox 3).

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:

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: 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.

Grids CSS Examples:

More Grids CSS Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings