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

How to Add Skip Nav to Your WordPress Theme

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.

You can add skip nav to your WordPress site in 5 minutes or less. Share on X

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.

Add skiplinks (Genesis Accessible plugin)

* 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.

Add skiplinks (WP Accessibility plugin)

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.

17 thoughts on “How to Add Skip Nav to Your WordPress Theme”

      1. 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)

        1. 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!

          1. 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. 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.

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

  2. 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.

  3. Pingback: Accessible Links by the Handbook • RachieVee: Rachel's Blog

    1. 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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.