Web Site Accessibility
Guidelines for SCS Webmasters

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features

Skip to Main Content

Rationale

When a navigation bar appears at the top of a page or down the left side of the page, users who are reading the page with speech synthesis must listen to all links across the top and down the left side before getting to the main content. This occurs for each page visited on the site when consistent layouts are used. However, sighted users can ignore the links and go directly to the main content. The purpose of this checkpoint is to remedy this inequity.

Techniques for Skipping to Main Content

The following techniques may be used to meet Checkpoint 6 from the list of "Must Have" Checkpoints.

The goal is to enable users to quickly bypass groups of links, such as navigation bars and tables of contents, to get to other portions of the page. Use either of the following techniques to meet this checkpoint.

Image Link to the Main Content

An effective technique is to have a link at the top of the page attached to an unimportant image. The target of the image link is an anchor placed at the beginning of the page's main content. You can see this technique in action at the top of this page. Underneath the header that begins this page ("Web Site Accessibility Guidelines for SCS Webmasters") is a clear gif. It is linked to an anchor for "main_content" placed later in the document. You can place your cursor over that clear gif and see the link in your status bar. Some browsers (IE5, for example) will also allow you to see this link by hitting your TAB button once. You can repeatedly hit the TAB button go proceed to other links on the page. Hit RETURN to activate the link.

A person using speech synthesis can activate the link and skip to the main content of the page. The alternative text for the image is "skip to main content," which is displayed in graphical browsers when the user moves the mouse over the image. For example:

<p align="center"><a href="#main_content"><img src="assets/clear.gif" width="200" height="20" alt="Skip to Main Content" border="0"></a></p>
...
<h2 align="center"><a name="main_content"></a><br>
<br>
Skip to Main Content<br>
</h2>

Text Link to the Main Content

A text link is a simple alternative to the first technique. It can take away from the overall design of the page so many webmasters prefer to use an image link. A textual skip navigation link is displayed at the top of the page instead of an image. The American Council of the Blind (ACB) was the first to use this technique. For example:

<a href="#navskip">Skip Navigation Links</a>
...
 <a name="navskip"></a><h1> The main content...</h1>

Testing

The easiest way to verify that this checkpoint has been satisfied is to click on the image or the text link and see if jump is made to the anchor you have placed at the beginning of the content.

What is Accessibility? - Making Your Web Site Accessible
Checklist for Accessibility
Must Have Items - Should Have Items - Try To Have Items
Items for More Experienced Webmasters
Apply These Items if Your Use These Special Features