Skip to Main Content Plugin

skip to main content plugin

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.

Background

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.

Demo

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

Download the latest JavaScript and CSS files from GitHub and reference them in the <head> element of your site, after the jQuery reference. For example:

<script type="text/javascript" src="/js/my-accessible-website-skipnav-1.0.0.js"></script>

<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:

<script type="text/javascript">
$(document).ready(function () {
$("#content").maw_skipnav();
});
</script>

Options

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:

<script type="text/javascript">
$(document).ready(function () {
$("#content").maw_skipnav({
             skipLinkText: "Skip the menu",
             linkAlwaysVisible: true
         });
});
</script>

Customisation

If you want to change the appearance of the skip link, it has the CSS class
maw-skipnav-skiplink

Click here to add a comment

Leave a comment: