Stack Overflow Example: Skip Navigation Workaround

Chrome and IE shift visual focus, but the next tab press jumps you to the start of the navigation menu. This is a jQuery workaround to place the keyboard focus in the right place.

HTML

<div id="skiptocontent"> <a href="#mainContent" id="skipper">Skip to Main Content</a>

</div>
<ul>
    <li><a href="#">First</a>
    </li>
    <li><a href="#">Second</a>
    </li>
    <li><a href="#">Third</a>
    </li>
    <li><a href="#">Fourth</a>
    </li>
    <li><a href="#">Fifth</a>
    </li>
    <li><a href="#">Sixth</a>
    </li>
    <li><a href="#">Seventh</a>
    </li>
    <li><a href="#">Eighth</a>
    </li>
</ul>
<div id="mainContent"></div>
<h2>Main Content</h2>
<p>This is a workaround for Chrome and IE.  When using "skip navigation" links, they shift the visual focus to this point.  However, without the workaround, the next tab press starts you out at the first link in the navigation.  The jQuery now shifts the keyboard focus, so the next tab press will actually skip the navigation and focus on this <a href="#">link demonstrating the workaround</a>.</p>

CSS

#skiptocontent a {
    padding:6px;
    position: absolute;
    top:-40px;
    left:0px;
    color:#000000;
    border-right:1px solid white;
    border-bottom:1px solid white;
    border-bottom-right-radius:8px;
    background:transparent;
    -webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100
}
#skiptocontent a:focus {
    position:absolute;
    left:0px;
    top:0px;
    background:#F1B82D;
    outline:0;
    -webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear
}

li {
    display:inline-block;
    float:left;
    width:20%;
    background-color:#000;
    padding:5px;
    text-align:center;
    border:1px solid #fff;
}
li a {
    color:#fff;   
}

li a:hover, li a:focus {
    color:#ccc;   
}

#mainContent {
    clear:both;   
}

h2 {
    margin-top:15px;            
}

JavaScript

$(document).ready(function () {
    $("#skipper").click(function () {
        $('#mainContent').attr('tabIndex', -1).focus();
    });
});