More Accessible YUI Grids Layouts with ARIA Landmark Roles

By YUI TeamMarch 6, 2009

YUI Grids CSS has long been an important tool for developers wishing to create more accessible layouts. Through its support of source-order independent layouts, Grids enables control of the reading order of a page, allowing developers to place the most important content higher in the markup so that it can be quickly discovered by users of screen readers. However, while the role of each section of a Grid (e.g., navigation, main content, footer, etc.) is easily perceived through visual style and layout, it is not immediately perceived by users of screen readers because <div>s are inherently structural elements with no default semantic meaning.

The Benefit of Landmark Roles

ARIA Landmark Roles improve the content parsability of Grids for users of screen readers. By allowing developers to declare the intended purpose of each section of a layout, Landmark Roles provide semantic meaning to each section of a Grid, giving users of screen readers a high-level summary of how a page is organized. In addition, Landmark Roles significantly improves a Grid's navigability. For example, the JAWS screen reader will announce all of the Landmarks when a page is loaded and allows users to quickly jump between them by pressing the semicolon key:

Using Landmark Roles

Of all the roles defined in the ARIA Specification, the Landmark Roles are among the easiest to implement since they don't require JavaScript for keyboard support or state management. Landmark Roles are applied to an element using the role attribute and can be used to improve the semantics of any section of a Grid. For example, to declare a section of a Grid as navigation, simply set the role attribute to a value of "navigation":

<div class="yui-b" role="navigation">

Presently the ARIA Specification defines seven different Landmark Roles:

Getting Started Is Easy

Since ARIA Landmark Roles are such a perfect complement to Grids, we've added built-in support to YUI Grids Builder, added a new section on using Landmarks to the Grids user guide, and created a new example to highlight usage of Landmarks Roles within YUI Grids CSS. Developers who are currently using Grids should definitely consider adding ARIA Landmark Roles to their markup to easily improve the accessibility of existing layouts.