Landmark Navigator

Posted on September 24, 2009

The current standard

Skip-navigation links have become a staple of accessible web design. They allow a keyboard-user to go directly from the beginning of a web page to the page’s main content without having to tab through dozens of navigation links and other supplemental information. Unfortunately, there are a couple problems with them:

  1. Unless they are designed as part of the page from the very start, skip-navigation links can be unsightly and/or interrupt the visual flow of a page..
  2. In trying to deal with the first problem, many web designers hide their skip-navigation links off-screen, so that they are only accessible to screen reader users. However, this has the negative effects of both adding a hidden tab stop to the page, and making the links unusable to sighted keyboard-only users.

The second problem can be solved by setting onfocus and onblur event handlers to the skip-navigation links, so that they appear when tabbed to and hide off-screen when they lose focus.

Landmarks

A relatively new scheme for identifying page sections like navigation and main content was introduced by the W3C's WAI-ARIA standard. WAI-ARIA defines a set of roles and properties that can be assigned to any HTML elements, thus identifying them to assistive technologies. A subset of these roles can be used to identify major document sections, or landmarks. Some newer assistive technology products, such as the most recent version of the JAWS screen reader, allow users to navigate web pages by document landmark, effectively providing a (better) alternative to skip-navigation links. However, the document landmarks remain hidden to anyone without the assistive technology designed to detect and make use of them. Sighted keyboard users, in particular, as well as users of older screen readers, must still rely on skip-navigation links.

A solution

The Landmark Navigator (javascript, css) brings landmark-based document navigation to all users. When you start tabbing through a web page, the Landmark Navigator detects the presence of WAI-ARIA landmark roles, and displays a menu that lets you jump directly to one of the landmarks. Go ahead and try it.

Comments

Posted by Ken Petri on September 28, 2009

Nifty! Very useful.

Submit a comment