WebAIM - Web Accessibility In Mind

"Skip Navigation" Links

Overview

Because the main content is not usually the first thing on a web page, keyboard and screen reader users often must navigate a long list of navigation links and other elements before ever arriving at the main content. This can be particularly difficult for users with some forms of motor disabilities. Consider users with no or limited arm movement who navigate a web page by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action numerous times before reaching the main content poses an accessibility barrier.

Of course, sighted people who use their mouse do not have any trouble with web pages like this. They can almost immediately scan over the page and identify where the main content is. In effect, sighted users have a built-in "skip navigation" mechanism: their eyes. "Skip navigation" links are useful to give screen reader and keyboard users the same capability of navigating directly to the main content.

Creating "Skip Navigation" Links

The idea is simple enough: provide a link at the top of the page that, when activated, jumps the user to the beginning of the main content area.

Visible "skip" links

The easiest method of creating a "skip navigation" link is to put it at or near the top of the page in regular text. The horizontal location of the link doesn't matter much. The key is to make sure the link is one of the first items that screen readers hear and that keyboard users navigate to using the keyboard (typically by pressing the Tab key). Otherwise, users may not realize there is a "skip navigation" link there at all, and may waste time navigating through extraneous links.

The link must also be visually apparent to be optimally usable. A very small or hidden link does not benefit the audience that most needs "skip" links—sighted keyboard users.

Example

The link is the first item in the page. The anchor or target for the link (where the link will jump the user to) is the main content region.

<body>
<a href="#maincontent">Skip to main content</a>
...
<main id="maincontent">
<h1>Heading</h1>
<p>This is the first paragraph</p>

The target is identified by its id attribute value matching the href value (minus the "#") of the "skip" link. When the "skip" link is activated, keyboard focus will be placed on the <main> element. Navigation and reading will proceed from this location in the page.

Alternatively, you can use a named anchor to identify the target for the link, though named anchors are no longer conforming in HTML5.

<h1><a name="maincontent" id="maincontent"></a> Heading</h1>
<p>This is the first paragraph</p>

Hidden "skip" links

Many designers worry about the aesthetic impact of visible "skip navigation" links. They may think these links don't look particularly attractive, that they get in the way of artistic expression, or that they may be confusing to some users that do not need them—especially because they are one of the first things within a page. While a visible "skip" link declares a type of distinct commitment to accessibility, to address these concerns, the link can be visually hidden until it is navigated to.

To be usable by all keyboard users, particularly sighted keyboard users, the link must:

  • be hidden by default
  • be accessible to keyboard navigation
  • become prominently visible when it is focused
  • properly set focus to the main content area when activated

Probably the most accessible method for visually hiding a skip link is to hide it off screen with CSS, then cause it to be positioned on screen when it receives keyboard focus. Because the link is still part of the accessible content on the page, keyboard and screen reader users can navigate it, and the link will become visible when accessed.

Some techniques, such as hiding the "skip" link with CSS display:none or the hidden attribute, will remove the link from keyboard navigation making it inaccessible to all users. Making the link the same color as the background or fully transparent, sizing the link to 0 pixels, or placing it on a one pixel transparent image can also pose accessibility issues.

Important

Review the article on Invisible Content Just for Screen Reader Users for details on using CSS to hide "skip" links off-screen.

One potential issue with this approach is that if the user navigates very quickly using the Tab key, the link may be visible on the page for only a fraction of a second and may be overlooked. This can be partially addressed by ensuring that the "skip" link is very visually distinctive at the top of the page when visible. Additionally, one could use scripting or CSS transitions to cause the link to animate so it remains visible on screen for a period of time.

Note

Navigate the links at the beginning of this page using the Tab key to see an example of a hidden skip link that becomes visible on keyboard focus using CSS transitions to make it visually distinctive and persistent on screen for at least a brief moment.

Which wording is best?

There are multiple ways that the "skip" link could be worded:

  • Skip navigation
  • Skip main navigation
  • Skip navigation links
  • Skip to main content
  • Skip to content

Any of these may be sufficient so long as the purpose of the link is clearly described. In general, we prefer "Skip to main content" as it explains where the user is navigating to versus what they are navigating past.

Multiple "Skip" Links

What if a page has multiple sections or multiple levels of navigational links? Should developers provide a "skip navigation" link to each of these sections or to skip over each level of navigational?

In most cases, a single "skip" link is sufficient. For pages that have very few navigable items preceding the main content, a "skip" link may not be necessary at all. On the other hand, a very complex page with several repeated elements may necessitate additional "skip" links. Remember, the purpose of "skip navigation" links is to reduce the clutter of numerous links. Adding more links increases link-clutter. If numerous "skip" links are present, it raises the question of whether a "Skip the skip links" link is necessary!

Skip links or other in-page links can also be used to allow users to jump to or jump over other types of page content. The "Article Contents" at the top of this page, for example, includes in-page links to facilitate navigation to major page sections. A "skip" link could also be used to allow the user to quickly bypass confusing or potentially inaccessible content, such as ASCII art, complex tables, or complex social media feeds.

WCAG Conformance

WCAG 2.4.1 (Bypass Blocks - Level A) states, "A mechanism is available to bypass blocks of content that are repeated on multiple Web pages." This does not necessarily require that a "skip" link be present. Beginning the main content with an <h1> or using a <main> region would be a sufficient "mechanism". However because neither of these techniques are highly useful for sighted keyboard users absent a screen reader or specialized software, a "skip" link is strongly recommended for optimal accessibility on pages with repeated navigation.

Alternatives to "Skip Navigation" Links

Implementing proper heading structures (especially starting the main content with an <h1>) and regions (especially <nav> and <main>) is a vital aspect of keyboard accessibility. Unfortunately, browsers do not yet natively support this type of navigation without the use of extensions or a screen reader. Even though "skip navigation" links are a rather clumsy and obtrusive solution to a real world problem, they are still often necessary to best meet the needs of all keyboard users.

Within web pages and applications, focus management may be necessary to ensure that keyboard focus is set on content elements when they are presented or activated. When a dialog pop-up appears, for example, focus will likely need to be set to it using JavaScript.

Alternate reading orders

Some web sites use CSS to change page layouts so the main content is presented before the navigation in the underlying source code (which is what determines the screen reader reading and keyboard navigation order), but after the navigation visually. Because the navigation is encountered first for keyboard and screen reader users, this method may make a "skip navigation" link unnecessary, but it raises other questions. Should a "skip to navigation" link be provided? Will non-visual users even be aware of the navigation?

When the visual order does not align with the navigation and reading order, sighted keyboard or screen reader users may be confused when what they are seeing or navigating to seemingly jumps around the visual page.

Because these types of layouts are very atypical and can pose confusion and difficulty, they are not recommended.