Skip to main content

Create a skip link for accessibility using jQuery

By Sue Johnson

Accessibility skip link

Some people access website links using the tab key on the keyboard instead of the mouse. This could be due to being blind or having mobility problems in the hands.

Tabbing through each item in the menu to get to the main content can be tedious for such users. A solution to this is to create links which will allow the user to skip past the menu.

This can be hidden for sighted users unless they are using the tab key in which case the skip link needs to become visible so that the user will know it is there. Users can hit the tab key multiple times and miss the link. The skip link can be made to appear and stay using jQuery.

This technique is used on this website.

First, you need to add the html content for the skip link. Use an internal anchor to the place you want to skip to. Here is an example:

<a href="#maincontent" class="tab_accessibility">Skip to main content</a>
<nav> ... </nav>
<main id="maincontent">

Next include jQuery and a file with the following code after it in your HTML page.

(function($){

// Skip Link

$(".tab_accessibility").focus(function(){
    $(this).addClass("tab_visible");
    });

})(jQuery);

The code selects the item with the class of “tab_accessibility” and adds a class of “tab_visible” when it comes into focus which is when the user tabs to that link.

Next you add the CSS markup for the accessibility link.

You need to hide the text for sighted users then make it appear when the class “tab_visible” is present.

This is a method of hiding text with CSS but making it available for screen readers from the Coolfields Consulting blog: https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/

.tab_accessibility {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute !important;
}

You need to make the text appear when the skip link has the class of “tab-visible”. Here rem units are used so em units are added for older browsers.

.tab_visible {
    clip: auto;
    height: 1.5em;
    height: 1.5rem;
    padding: 0 0.2em;
    padding: 0 0.2rem;
    width: auto;
    background-color: #fff;
    color: #000;
}

You can also add this code to the focus state of “tab_accessibility” so that there is a fallback if JavaScript is disabled.

That is it. Do you think you would use this for your website?

All comments will be held in a moderation queue. A selection will be published.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.