Skip Navigation Links
On most pages, keyboard and screen reader users 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. 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 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 and may waste time navigating through extraneous links. The link must also be apparent to be helpful.
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 go to 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 are usually unnecessary
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 make keyboard navigation more efficient. Adding more links increases link-clutter. At what point will you need to add a "Skip the skip links" link?!
In-page links elsewhere in a page 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.
Other In-page Navigation Options
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.
Headings and regions
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 that 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 it comes 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.
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. These types of layouts are not recommended.