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).
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 Tweet
Ready? Follow the instructions below that apply to you.
I use the Genesis Framework
* 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.