While working on Rampart, my upcoming commercial theme, I began to research the best practices surrounding “Skip to Content” links. If you’re not familiar with skip links, they are simply links that allow site visitors to bypass the site navigation and go directly to the main content of the page. These links are especially useful for people using screen readers or navigating with the keyboard rather than the mouse. Lets take a quick look at the three ways that skip links can be implemented before diving into the code.
- Always visible – Always displaying the skip link visibly in the header is the easiest and most accessible way to implement a skip link. However, it may clutter the header design and even confuse site visitors using a mouse or touch screen to navigate.
- Never visible – Another method is to position the skip link off screen. This allows screen readers to use the skip link, but hides it from actually displaying on the page.
- Sometimes visible – A compromise between the two methods previously mentioned is to only display the skip link when it has focus. This can be done by positioning the skip link off screen initially, but moving it’s position when it gains focus.
Skip to Content Links in Action
WordPress has a few skip links built into core. We can see them by logging into the WordPress admin and hitting the tab key on our keyboard. In the admin area, there are two skip links in use. The first skips to the main content of the page and the second skips to the WordPress toolbar. They both become visible in the top left corner of the screen as they receive focus during keyboard navigation. The “Skip to toolbar” link is also available on the frontend for logged in users.
Adding Skip to Content Links to a WordPress Theme
In this tutorial, we will add a skip to content link to a WordPress theme and match the design used by the default skip links built into WordPress. However, we will add a little extra functionality to make sure the skip link can be easily noticed even by keyboard users tabbing through the site quickly.
Let’s start with the HTML. The skip link is simply a link pointing to an ID within the page, rather than a full URL. It is often placed immediately after the site title.
<a class="skip-link" href="#content">Skip to main content</a>
In this case, the link points to the #content div. If your theme uses a different ID for the main content area, you will want to change the href value accordingly.
Please note: if you are creating a theme for public distribution, you should wrap the “Skip to main content” link in a translation function.
Now let’s move on to the CSS.
.skip-link {
position: absolute;
top:-100px;
/* Styled to match the default WordPress screen reader text */
background-color: #f1f1f1;
-webkit-box-shadow:0 0 2px 2px rgba(0,0,0,.6);
box-shadow:0 0 2px 2px rgba(0,0,0,.6);
color: #21759b;
display: block;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 700;
height: auto;
left:6px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
width: auto;
z-index: 100000; /* Above WP toolbar */
-webkit-transition: top .75s ease-out;
transition: top .75s ease-out;
}
.skip-link:focus {
color: #21759b;
top: 7px;
-webkit-transition: top 0s;
transition: top 0s;
}
Positioning
We start off by setting the position of the skip link to “absolute” and setting the “top” property to -100px. A negative top value moves the element upward, which positions it off the top of the screen so that it cannot be seen. Then, in the “.skip-link:focus” section toward the bottom of the code the “top” property is changed to 7px, which brings it down onto the screen so it can be seen.
Styling
The majority of the code simply styles the skip link to match the default skip links implemented in WordPress itself. These styles can be easily changed if you prefer to make the skip link match your theme.
Transitioning
Next are the transition styles that control how the skip link transitions from off screen to on screen and back off screen. WordPress core does not use CSS transitions on skip links at the time of this writing (WordPress v3.8). However, using a transition to slow the disappearance of the skip link can help ensure that it is noticed even by visitors tabbing through the site quickly (If I had to tab past all the navigation on every page load, I think I would get in the habit of tabbing very quickly, which could cause me to miss the skip link that would save me the trouble of so much tabbing).
Let’s look at the transition styles in a little more detail. First are the .skip-link transitions that control the changes in the “top” property when the skip link is moving off of the screen (top .75s ease-out). As you can see, the transition is set to take three quarters of a second to complete, allowing time for the skip link to be seen even if it was tabbed past in a hurry. Second are the “.skip-link:focus” transitions that override the previous transitions in order to control the “top” property when the skip link is moving onto the screen (top 0s). There is no reason to delay the appearance of the skip link, so the timing is set to zero seconds.
At this point, our skip link should be working properly. It should be displayed immediately as we tab through the site and then disappear slowly upward as we move on. If you have any questions or suggestions of ways the skip link could be improved, I’d love to hear from you on Twitter.