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.

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.

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.

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.

Trackbacks

[…] 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 […]