Add a "Skip Navigation" Link to Help Keyboard Users Reach Main Content Faster

The main content of a web page rarely comes first in a typical layout. There are a number of items users must bypass in order to reach main content, like a website's logo, a site search, and the main navigation. For sighted keyboard users and keyboard users with visual impairments, tabbing through all of these items to reach the main content can be a long and tedious process. Providing a "Skip navigation" or "Skip to main content" link as the first link in the design can save keyboard users time and energy, and eliminate having to hunt for the main content on a web page.

For most browsers, creating a "Skip navigation" or "Skip to main content" link is as simple as creating a normal link that uses the id of an element at the beginning of the content, like an <h1> element.

"Skip navigation" Link Example

Sample code for the skip navigation link at the top of the page:

<div id="skip"><a href="class/html-css/navigation/skip-navigation#content">Skip navigation</a></div>

Sample code for the beginning of main content:

<h1 id="content">The heading at the beginning of main content</h1>