When you’re navigating a website with the keyboard, it can be really tedious to have to tab through all the navigation links on every page. I’m going to present a solution that gives users the ability to skip straight to the main content of the site.
I'm building a series of plugins to help you make accessible websites. The main reason websites aren't very accessible is usually that developers don’t have the time to focus on it, so a library of plugins feels like the best way to help out. They’re all open source and I’d love the community’s feedback on how to improve them.
WordPress already has Skip to Main Content functionality built in to some themes, so you may not need this plugin. For demo purposes, I’ve disabled the WordPress feature and installed my own plugin on this site.
To try it, hit the tab key and you’ll see the skip link. When you press enter, it jumps the tab focus to the main content of this page, so you don’t have to go through all the menu links.
Get it for your site
The plugin depends on jQuery version 1.9+.
<link rel="stylesheet" href="/css/my-accessible-website-skipnav-1.0.0.css" type="text/css" />
To use it, select the main content container of your site with jQuery and call the maw_skipnav function. Make sure you put it in a document.ready event handler, like this:
There are a couple of options you can pass in to customise the behaviour of the plugin.
skipLinkText: By default, the skip link says “Skip to main content”, but you can change this if you’d like it to say something different or for internationalisation.
linkAlwaysVisible: The default behaviour of the plugin is to hide the skip link until it has focus, but if you set this to true, it will always show.
Here’s an example with the options:
If you want to change the appearance of the skip link, it has the CSS class