Code Responsible

Skip navigation

How to create a skip navigation link

apple keyboardAt some point you’ve probably come across the recommendation of creating a “skip to content” or “skip navigation” link for accessibility purposes. The reason for creating a skip link is to give the user the ability to jump to the main content without having to tab through the navigation each time. This can get annoying when a user visits multiple pages. Some websites may have the link visible at all times, others may only have it visible when focus is set to it.

The example below demonstrates the use of the skip link. The skip link will link to the main content DIV that has an ID of “main”. To also insure we’ve set focus to the DIV, I’ve also used some JQuery to set the focus on the DIV and set the tabindex to 1. This will ensure the focus is properly set on the DIV and prevent the user from having to tab through the navigation.

<!DOCTYPE html>
<html>
    <head>
        <title>Skip Navigation Link</title>
    </head>
    <body>
        <a href="#main" class="skipLink">Skip Link</a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div id="main">
            <h1>Main Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu nisi eu mauris laoreet facilisis a quis ante. Nam blandit dolor in dolor posuere sit amet venenatis diam viverra. Sed porta hendrerit est, in varius ante vestibulum eu. Curabitur ut elit nulla. Phasellus rhoncus aliquet velit, a vulputate quam convallis eget. Morbi vestibulum elementum luctus. Quisque id accumsan diam. Integer laoreet quam id leo dignissim rutrum. Duis lacinia accumsan ligula, ut ornare ligula ornare vitae. In libero nulla, tincidunt vitae pulvinar in, convallis ut risus. Pellentesque ac orci ac orci pulvinar fermentum vel ut nisi. Nunc fermentum eleifend velit placerat congue. Curabitur aliquet enim a odio mollis laoreet. Ut interdum venenatis purus nec lobortis. Nulla facilisi. </p>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){              
                $(".skipLink").live("click", function(){
                    $('#main').focus();
                    $('#main').attr("tabindex",1);
                });
            });
        </script>
    </body>
</html>

Download Source

41 Posts

Ryan Burgess

Ryan Burgess is a Manager, UI Engineering at Netflix in San Francisco, California. Previously at Evernote. Listen to Ryan on the Front End Happy Hour podcast. He's also the creator of SensesLost.com, an online-based arts and culture magazine that focuses on graffiti and tattoo art.

Leave a Reply

Comment Form