Skip links are particularly useful for users who access a document with screen readers and users who rely on keyboards. Web pages and other hypertext documents often have a large amount of information that precedes the main content; while sighted mouse-users can “skip” past it to the desired content, other users may find they have to repeatedly move to the next link until they reach the page’s main content. A skip link which bypasses this content can make the document much more accessible.
What are Skip Links?
Skip links are internal page links which aid navigation around the current page, rather than to completely new pages. They are mainly used by screen reader users for bypassing or ‘skipping’ over repetitive web page content. Skip links are not usually visible on a web page for sighted users as these users can easily skip over any information such as navigation to the specific content that interests them. Screen reader users, however, can not easily do so unless provided with a specific link to the main content. This article outlines what skip links are, what the issues are with current approaches and a best-practice method of implementing them.
One of the most common techniques in web accessibility is the “Skip Navigation” link, sometimes referred to as “Skip to Content.” There are a couple of reasons why this feature is used on most accessible websites.
First, a screen reader will always try to read aloud any navigation it comes across, on every page load, no matter what. This can become annoying to those users. Providing a mechanism with which to quickly bypass it can greatly improve their experience. With as little as two keystrokes, they can jump right to the relevant content.
The other benefit is that sighted users who rely on only a keyboard for navigation (those with motor disabilities like paralysis or conditions like Parkinson’s disease) can also quickly bypass navigation containing many links.
There is more than one “best” way to word the link. Here are some fairly common examples:
- Skip navigation
- Skip main navigation
- Skip navigation links
- Skip to main content
- Skip to content
Many developers worry about the aesthetic impact of “skip navigation” links. They may think these links don’t look particularly attractive, they “ruin” the layout, or that they get in the way of artistic expression. It’s easy to argue that the links may be confusing for users that do not need them. While a visible “skip” link declares a type of distinct commitment to accessibility, to address these concerns, the link can be visually hidden.
How do you add skip links?
Now that you know what a skip link is, it’s time to add them to your site. There are a couple of ways to solve this problem. The easy way (and for you non-coders, the only way), is to install a plugin. The hard way is to code them into your theme yourself.
Using a plugin
There are two plugins I recommend when it comes to skip links: WP Accessibility by Joe Dolson and Genesis Accessible by Rian Rietveld. Both plugins resolve several accessibility issues, including adding basic skip links for you. Keep in mind that Genesis Accessible is specifically for sites built using the Genesis Framework. If you don’t have a Genesis site, use WP Accessibility.
Coding it yourself
Your other option is to code skip links yourself. The code itself is fairly simple and only requires some basic HTML and CSS knowledge, but you’ll need to be comfortable with how WordPress themes and templates work before attempting this method. From this point on, I’ll assume you know how to find the files referenced and how to edit them.
Wrapping it up
Skip links are a perfect example of an accessibility feature that seems like a lot of work, but really isn’t. All we did on the code side was add a couple of lines of HTML and CSS. For the non-technical approach, we installed a plugin. Neither method takes very long, which is important to note since skip links are an A-level standard for WCAG 2.0 (the most current WCAG standards). You are required by law to have them on your site. Don’t put yourself at risk; add your skip links today!