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.
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
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
Here is how the basic layout comes together:
Note: Some ARIA Landmark Roles such as
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
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.