How to Create Skip Navigation Links

The purpose of skip navigation is to allow people browsing with screen readers to jump right to their main content or to other key points on their page. This saves the screen reader user the agony of tabbing through all their links to get to the main content. Here is how to work with skip navigation links.

Instructions

Difficulty: Easy

Things You’ll Need:

• A text editor or HTML editor to create web pages

1. Skip links are most effective if they are inserted at the very beginning of the page. In this image, from the website accessify.com (see link below), you see several skip links even before the banner appears.
2. A skip navigation hyperlink links to an ID. For example, you may have a page division with the id="content" attribute. To link to that you simply write a hyperlink like the one shown in the image.
3. Before well-structured pages using CSS layouts and divs with ID attributes came on the web design scene, people often created links to various parts of a page using named anchors. This is rather out of date, but still possible. It takes two steps. First insert the named anchor in the HTML in the location where you want the link to take the user. Then write the hyperlink somewhere else on the page. See the image for an example.
4. A well-written page with proper heading structure can be easily navigated with most modern screen readers. Keyboard commands allow the user to jump from heading to heading to hear the headings and quickly understand how the entire page is organized.