Skip Navigation (Accessibility/508)

Classification:

[x] Standard

Categories:

[x] Accessibility/508
[x] Applications
[x] Links
[x] Navigation
[x] Required Page Elements

Standard:

All HHS pages must provide a method for skipping repetitive navigation.

Rationale:

Sighted users are able to scan a page and quickly select a section of the page to read. Unless “Skip Navigation” is provided, persons with assistive technology (screen reader, etc.) must “read” every link on the page before selecting a section of the page to read.

Providing a method of skipping though sections of navigation will allow those using assistive technologies readers to navigate the main content of the page.

Sources:

http://www.section508.gov/

www.access-board.gov/508.htm

http://www.webaim.org/techniques/skipnav/

Requirements:

Every page with repetitive navigation must provide a method of skipping the navigation and providing a link to the main content area.

The skip navigation element should be the first element after the opening body element.

Pages with multiple navigation sections don’t need “skip navigation” to other navigation sections but should provide a method of skipping directly to the main content area.

Skip navigation text should not be visible to sighted users. The following example uses CSS to make the skip navigation text transparent to sighted users by applying a CSS style.

Example of Skip Navigation Style:

#skip a, #skip a:hover, #skip a:visited
{

position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;

}

#skip a:active, #skip a:focus
{

position:static;
width:auto;
height:auto;

}

Example of Skip Navigation Placement:

<html>

….

<body>

<div id=”skip”><a href=”#MainContent”>Skip to Main Content</a></div>

Related Standards:

Related Guidelines:

Section 508 Accessibility Policy

Checklists:

Provide a method of skipping navigation to the main content area of the page is provided.