United States Department of Veterans Affairs
VHA Office of Health Information

Training for Testing HTML for 508 Compliance

Page 2 of 5

Testing for §1194.22 (o): Skip Navigation

Back Next

Example

Most skip navigation links are visually hidden on the page. Even though they are visually hidden, a screen reader will pick these up and announce them to the user. page shown in the image below contains a skip navigation link that is not visible to a non-AT user.

Web page with hidden skip nav link.

On this site, when someone uses the keyboard to tab through the links, the skip navigation link becomes visible. This is not always the case as it depends on how the link is coded. Having the link display visually when it receives the focus can be beneficial to those who use keyboard navigation.

Web page where skip nav link has focus.

When a user invokes the skip navigation link, the focus of the page will go to the anchor tag (bookmark) that is defined at the start of the main content. This allows those navigating with the keyboard to quickly bypass links to access the main content of the page.

Here is a code snippet of a skip navigation link and anchor tag; this code should be the first link on the page:

<!-- SKIP NAV -->
      <div id="skiplink">
            <a href="#content-area">skip to page content</a>
      </div>

The target is the anchor tag which is placed just before the main content:

<a name="content-area"></a>

Select Next to learn about Testing with AT.

Glossary in new window Resources in new window   Back Next