How to Add Skip Nav to Your WordPress Theme

Carrie Dils

February 17, 2015

Play on Devo's Whip It - It's not to late to SKIP it

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.

Mac system preferences for skip links.

Safari – Go to Preferences > Advanced and under Accessibility select the Press Tab… option.

Enable Skiplinks in Safari (Mac)

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.

[bctt tweet=”You can add skip nav to your WordPress site in 5 minutes or less.”]

Ready? 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.

Comments

17 responses to “How to Add Skip Nav to Your WordPress Theme”

slaFFik

February 18, 2015

Doesn’t work in Windows 7 in Firefox 35 on this website.

Reply
1. Carrie Dils
  
  February 18, 2015
  
  Thanks for the heads up! Looks like this is a common issue with Windows. Do they work in Chrome?
  
  Reply
  1. Jodi
    
    February 18, 2015
    
    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)
    
    Reply
    1. Carrie Dils
      
      February 18, 2015
      
      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!
      
      Reply
      1. rabe.
        
        November 18, 2016
        
        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.
      2. Carrie Dils
        
        November 21, 2016
        
        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.
Dev

February 18, 2015

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?

Reply
1. Carrie Dils
  
  February 18, 2015
  
  All the options are really up to you to decide. I recommend checking the plugin documentation to familiarize yourself with what the plugin does.
  
  Reply
Chris Bryant

February 20, 2015

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.

Reply
1. Carrie Dils
  
  February 20, 2015
  
  Haha – thanks for noticing the little things. 😉
  
  Reply
Accessible Links by the Handbook • RachieVee: Rachel's Blog

May 11, 2015

[…] we go on with this, I want to point out Carrie Dills’ post, How to Add Skip Nav to Your WordPress Theme. She explains what skip links are as well as how to implement in less than 5 minutes without […]

Reply
Randal Oulton

April 14, 2016

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/

Reply
Tom

September 11, 2016

hi, Carrie. I use a non genesis wordpress theme, and i try intall WP Accessibility plugin. But it’s not working

Reply
Marjorie Ray, Codewryter

December 23, 2017

Thanks Carrie! This saved me today. Your posts are so helpful. Thanks again.

Reply
1. Carrie Dils
  
  December 24, 2017
  
  Glad to hear it!
  
  Reply
Deani Plumin

April 22, 2019

no skip link on this site so it appears the instructions don’t work.
Chrome – Windows 10
FireFox 65.0.2

Reply
1. Carrie Dils
  
  April 24, 2019
  
  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.
  
  Reply