Skip Navigation to Main Content

Navigation links are typically located at the top or down the left side of a Web page. People using screen readers will usually have to listen to all links across the top and down the left side before getting to the main content. What's more tedious is that this can occur on every single page the user visits!

So, it is essential that you provide a means to quickly bypass the main navigation links to get to the main content.

Here are two tips on how to bypass the main navigation links.

Image Link to the Main Content

Attach a link to an unimportant image at the top of the page, and set the target of the image link to the start of the page's main content. Of course, you must place an anchor near the beginning of the main content area for the link to work.

People using a screen reader can activate the link and skip to the main content of the page.

For example:

Image Link
<A HREF="#main_content"><IMG SRC="blank.gif" ALT="Skip to main content"></A>

Start of Main Content Anchor
<A NAME="main_content"></A><H1>Main content</H1>

Text Link to the Main Content

This technique is similar to the "Image Link to the Main Content" technique described on the previous page. Instead of adding an image link, you add a text link to the top of the page and set the target of the link to the start of the main content.

For example:

Text Link
<A HREF="#main_content">Skip to main content</A>

Start of Main Content Anchor
<A NAME="main_content"></A><H1>Main content</H1>