Keyboard accessible within-page links script.

keyboard-focus-shiv.js

/*

Webkit browsers don't move the keyboard focus from internal links, 
so this script adds the attributes to allow focus and then moves it.

Requires jQuery, and assumes you link to block level elements like <sections>

Published by @alastc On Github at:
https://gist.github.com/alastc/7698213
 
Creative Commons BY-SA 2.0
http://creativecommons.org/licenses/by-sa/2.0/

*/

// Using jQuery.
$(document).ready(function(){

    // Focus on main navigation links, and a skip link. Edit to target your links.
    var urls = $('.toc a, .skip');
    
    // For each link in the navigation:
    $.each(urls, function( i, val ) {
        
        // Get the "hash", the bit after #
        var hash = this.hash;
        
        if (hash) {
            // Add tabindex and remove the outline
            $(hash).attr("tabindex", "-1").css("outline", "0");
        }

        // Assumes that 'this' link is a link with href, therefore click() works with the keyboard.
        $(this).click(function() {
            if (hash) {
                // focus on the target
                $(hash).focus();
            }
        }); // end click

    }); // end each

}); // end document ready