So far in this web accessibility series we’ve covered how to check a website for accessibility and where accessibility turns into a legal issue.
In this article, we’re going to roll up our sleeves and do something about accessibility: we’ll add skip nav to a WordPress theme. And the best part? It’s really easy to do (you can implement it in less time than it takes you to read this article).
But first…
What the heck is skip nav?
Go to just about any website (this one included) and you’ll notice there’s a lot of links on the page before you ever get to the main content. At minimum there’s generally a linked site title or logo and a navigation menu.
For sighted people, we’re able to see all that and visually skip right to the good stuff. For people using a screen reader, they’ve got to wade through every one of those links to get to the content.
Fortunately, there’s a simple solution: You can add skip nav (short for “skip navigation links” and also called skip links). Skip nav refers to the practice of adding links at the very top of a web page so that users can quickly skip to a section of the page (i.e. the main content).
Skip nav is unobtrusive and won’t even be visible unless you’re tabbing through links (versus using a mouse).
To see it in action, place your cursor in the browser’s address bar while on this site and then use the tab key. When you read “Jump to Content”, press the enter key to see how it works.
It doesn’t work!
(thanks @twsjonathan for the reminder to add this section!)
If you’re on a Mac (and depending on what browser you’re using), you may need to change some settings to see skip links in action.
Firefox – Go to System Prefs > Keyboard > and look at the bottom of the window for the Full Keyboard Access option. Choose All controls.
Safari – Go to Preferences > Advanced and under Accessibility select the Press Tab… option.
Why do we need it?
I’m just gonna leave this video here without comment (other than to say you probably won’t make it to the end because it’s such an annoying experience).
How you can add skip nav in any WordPress theme:
Okay, now that we all want to save the world from the awful fate of a 1990’s-esque real estate site without skip links, I’ll show you how you can add skip nav to your WordPress site in 5 minutes or less.
You can add skip nav to your WordPress site in 5 minutes or less. Click To TweetReady? Follow the instructions below that apply to you.
I use the Genesis Framework
If you’re using a theme for the Genesis Framework, go download and activate the Genesis Accessible plugin. From the settings page, check the box next to Add skiplinks.
* Note: If you’re using the Utility Pro theme, it already includes skip links, so no need to enable them from the Genesis Accessible plugin!
I use a non-Genesis WordPress theme
If you’re using just about any other theme for WordPress (there may be some exceptions), go download the WP Accessibility plugin. From the plugin settings page, check the box next to Enable Skiplinks.
Congratulations, you’re DONE!
With just a bit of effort, you’ve made your website a friendlier place on the web.
When you’re ready, check out the next post in this series learn which accessible WordPress themes and plugins you can use to give yourself a head start.
Doesn’t work in Windows 7 in Firefox 35 on this website.
Thanks for the heads up! Looks like this is a common issue with Windows. Do they work in Chrome?
At first I didn’t think it was working in Chrome, but if I hit TAB twice it did. Thing is, you don’t need to be in the address bar to make it work by hitting TAB once. If you just land on the page and don’t click anywhere first, then hit TAB, it works fine.
Same for Firefox — if in the address bar, it tabs over to the search bar instead and through links in there (maybe Firefox needs to make that more accessible?). But if you just land on the page and don’t click anywhere first, then hit TAB, it works fine.
If I click on your nav bar instead of the address bar, it works every time.
(I’m also on Win7 using FF35 and Chrome 40)
Thanks for the additional testing and info! It’s obvious that various browsers/platforms handle those tab behaviors differently. I’m also quite curious to understand the mobile browsing experience better. Still much to learn!
Right now I discovered a funny feature using the TAB-key for ‘skip to content’. On a wordpress page using theme ‘simone’ and plugin ‘WP Accessibility’. I ticked the ‘Accessibility Toolbar Settings’ in the setttings, so they show up. The theme provides skip-links by default.
After loading the page and hitting the TAB-key once the focus is on ‘toggle high contrast’, next hit ‘toggle greyscale’, third hit gives ‘toggle text size’.
So in the end ‘skip to conten’ is reached after the fourth TAB-stroke. At least the happens in Firefox 50 and Chrome 54 on linux.
That’s an interesting point and, most likely, overly redundant on every page of a site. I wonder if the plugin set preferences via a cookie if that would enable a first-time visitor to make adjustments and any subsequent visits avoid those tabs.
Thanks for this. I added the Genesis Accessible plugin to our site. There were a lot of other options besides the two in your blog. Should those also be checked?
All the options are really up to you to decide. I recommend checking the plugin documentation to familiarize yourself with what the plugin does.
Hey Carrie,
Thanks. What a cool method for improving accessibility.
And also – thanks for infusing some Devo into the post.
Indeed it’s the little things that make my day.
Haha – thanks for noticing the little things. 😉
Pingback: Accessible Links by the Handbook • RachieVee: Rachel's Blog
That Genesis accessible plugin says it requires the Leiden child them to work? “So what do you need……. The Genesis child theme Leiden” https://wordpress.org/plugins/genesis-accessible/
hi, Carrie. I use a non genesis wordpress theme, and i try intall WP Accessibility plugin. But it’s not working
Thanks Carrie! This saved me today. Your posts are so helpful. Thanks again.
Glad to hear it!
no skip link on this site so it appears the instructions don’t work.
Chrome – Windows 10
FireFox 65.0.2
There are skip links on this site, however they’re clearly not working universally! The article does need a refresh for sure: The Genesis Framework now provides native support for skip links, making the Genesis Accessible plugin redundant.