YUI Library Home

Site Search (YDN & YUIBlog):

# 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).

View example in new window.

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

Example Page Using YUI Grids And ARIA Landmark Roles @ Yahoo! Video

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

- Page Width = 750px
- Page Width = 950px
- Page Width = 974px
- Page Width = 100%
- Custom Page Width
- Preset Template 1, 160px left
- Preset Template 2, 180px left
- Preset Template 3, 300px left
- Preset Template 4, 180px right
- Split Pane resizing with Grids CSS (included with examples for Resize Utility)
- Using a Layout with Grids CSS (included with examples for Layout Manager)
- Preset Template 5, 240px right
- Preset Template 6, 300px right
- Standard Nesting Grid (1/2 - 1/2)
- Special Nesting Grid "B" (1/3, 1/3, 1/3)
- Special Nesting Grid "C" (2/3, 1/3)
- Special Nesting Grid "D" (1/3, 2/3)
- Special Nesting Grid "E" (3/4, 1/4)
- Special Nesting Grid "F" (1/4, 3/4)
- Nested Standard Nesting Grids (1/4 - 1/4 - 1/4 - 1/4)
- Using ARIA Landmark Roles With Grids
- Website Left Nav With Submenus Built From Markup (included with examples for Menu Family)
- Website Left Nav With Submenus From JavaScript (included with examples for Menu Family)
- Website Top Nav With Submenus Built From Markup (included with examples for Menu Family)
- Website Top Nav With Submenus From JavaScript (included with examples for Menu Family)
- Website Left Nav Using Animation With Submenus Built From Markup (included with examples for Menu Family)
- Website Left Nav Using Animation With Submenus From JavaScript (included with examples for Menu Family)
- Website Top Nav Using Animation With Submenus Built From Markup (included with examples for Menu Family)
- Website Top Nav Using Animation With Submenus From JavaScript (included with examples for Menu Family)

### More Grids CSS Resources:

- User's Guide (external)
- Cheat Sheet PDF (external)

Copyright © 2009 Yahoo! Inc. All rights reserved.

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