How to Use Skip Links to Make Your WordPress Site More Accessible
In our introduction to accessibility series, we talked about the basis for the various Web Content Accessibility Guidelines (WCAG). Now it’s time to take the next step by looking at some of the key guidelines and showing you how to make your site more accessible. Let’s start with bypass blocks, more commonly known as skip links.
What is a Skip Link?
A skip link is a special link that is hidden on your site until it comes into :focus via the tab key or a screen reader. Their purpose is to give alternative technology users (people using keyboards and screen readers) the ability to skip blocks of content. Straight from the standards:
“A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.” – WCAG Standard 2.4.1 – Bypass Blocks
2.4.1 is an A-level standard. This means it is covered by Section 508, and required by law. You need to have skip links.
Can you guess what the most common block of content skip links apply to is? If you guessed “the menu,” you’d be right. Menus appear on just about every page of a site. Sighted users and mouse users tend to scroll right by them because it’s one of those site elements you just expect to be there. But nav menus aren’t the only blocks that need skip links.
A commonly overlooked area for skip links is left-hand sidebars (or right-hand sidebars for sites in right-to-left languages like Arabic). Because of where they tend to fall in semantic order, users will need a way to skip past the regularly repeated sidebar in order to get straight to the content.
The same goes for featured post blocks that show up outside of the home page. Some site designs carry featured post sections or sliders over to interior pages. Unless the content of those sections is changing, ie: category or archive pages, there should be a skip link in place.
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 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
One plugin we recommend when it comes to skip links: WP Accessibility by Joe Dolson. It resolves several accessibility issues, including adding basic skip links for you.
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, we’ll assume you know how to find the files referenced and how to edit them.
We’ll start by writing the actual skip links first. This will allow easy copy-and-pasting into the template files. Recalling HTML knowledge, you’ll need to write out an anchor tag. Note that the formatting here is for readability.
<a href=”[don’t fill this in yet]” class=”skip-link”>
Skip to Main Content
&amp;lt;/a&amp;gt;We’ve left the href attribute blank on purpose. This is because we need to define where our skip link will link to. For this example, we’ll use the <main> element as our target. Because we can’t link directly to an element without an ID, we’ll need to make sure our <main> element has one. Your <main> element will likely be found in header.php, but not always. Once you’ve located the element, you’ll need to make sure it has an ID. If not, add one like so:
&amp;lt;main id=”main-content”&amp;gt;
[a bunch more code below]The specific value of the ID isn’t important, but you’ll need to remember it. Now you’ll want to update your skip link code with the ID value.
&amp;lt;a href=”#main-content” class=”skip-link”&amp;gt;
Skip to Main Content
&amp;lt;/a&amp;gt;Now that you have your skip link built, go back to your header.php file or wherever your theme’s opening <body> tag is located. The <body> tag is essential placement for skip links as they need to be the absolute first thing that comes into :focus for keyboard and screen reader users.
Just after the <body> tag, past your completed HTML. The following shows a more detailed example with multiple skip links. If you want to add multiple links to your site, make sure the IDs are correctly applied.
&amp;lt;body&amp;gt;
&amp;lt;a href=”#left-sidebar” class=”skip-link”&amp;gt;Skip to Sidebar&amp;lt;/a&amp;gt;
&amp;lt;a href=”#featured-posts-block” class=”skip-link”&amp;gt;Skip to Featured Posts&amp;lt;/a&amp;gt;
&amp;lt;a href=”#main-content” class=”skip-link”&amp;gt;Skip to Main Content&amp;lt;/a&amp;gt;
[Header navigation goes here]Now you’ve got skip links in your code, but you’re not done yet! If you load your page now, you’ll see the skip links at the top. Time to add some CSS. The styling of skip links is pretty simple, using the example below:
.skip-link
{
position: absolute;
top: 0;
z-index: 9999;
right: 100%;
padding: 5px;
padding: 0.5rem;
font-size: 20px;
font-size: 2rem;
color: #000;
background: #FFF;
}
.admin-bar .skip-link
{
top: 32px;
}
.skip-link:focus
{
right: auto;
}What you don’t see is the use of display: none. Using it will cause a screen reader to skip the link entirely, defeating the purpose entirely. The hiding is done by placing the text off screen using right: 100% and shifting it to right: auto on :focus.
With your CSS applied, you’re all set. Your skip links are in place, but hidden. When a keyboard user or screen reader loads up your page at initiates :focus, your skip links will let them move right on to the content they came for.
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 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!
