"Skip Navigation" Links
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.
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.
<a href="#maincontent">Skip to main content</a>
<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.
<p>This is the first paragraph</p>
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 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
<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.
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.