JSFiddle - React, Tailwind, and code Playground

by Blink

HTML

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
    <nav>
        <ul class="access-list">
            <li><a href="#content" class="access-item visuallyhidden focusable">Skip to content</a></li>
            <li><a href="#nav" class="access-item visuallyhidden focusable">Skip to nav</a></li>
        </ul>
    </nav>
    
    <header>
        <h1>Welcome to an awesome site</h1>
        <p>Why not skip some content</p>
    </header>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet tristique pharetra. Nam volutpat nisl in tortor tempor quis rutrum ante pharetra. Nam erat nulla, faucibus sed mattis sit amet, volutpat nec sem. Proin in feugiat libero. Proin metus magna, lobortis non lobortis vitae, placerat vitae dolor. Proin elementum augue vitae felis bibendum aliquam ac eu quam. Aenean magna nisi, facilisis eget scelerisque eget, sodales id enim. Ut eget mi sem, et bibendum dolor. Curabitur rutrum turpis et nibh cursus ac euismod elit pulvinar. Praesent et facilisis purus. Nulla venenatis lectus id nisl fermentum hendrerit. Fusce malesuada consectetur justo, ac laoreet justo hendrerit tincidunt. Morbi ut risus orci.</p>
        <p>Nulla mollis viverra odio iaculis vulputate. Sed at nisl eu mi ultricies faucibus sit amet nec nulla. Sed ipsum tellus, posuere sit amet consequat quis, suscipit eget metus. Pellentesque sit amet elementum sapien. Proin in mauris nulla, a tempor dui. Morbi interdum orci vitae urna faucibus faucibus. Phasellus risus urna, porttitor ut dictum at, tincidunt id est. Quisque et dui sit amet lorem feugiat consequat ut vitae diam. Proin elit sem, luctus facilisis sagittis vel, blandit et lorem. Fusce luctus, leo sed dapibus porttitor, orci purus ultricies nibh, vitae ultricies metus lorem id diam. Morbi id consequat sapien. Nulla blandit nisi at magna fringilla hendrerit. Morbi vel lacus enim, eget sollicitudin felis. In rutrum sapien libero.</p>
        <p>Maecenas...

CSS

body {
    width: 600px;   
    margin: 0 auto;                
}

.access-list {
    list-style-type: none;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    font-size: 48px;
    background-color: yellow;
}

/* html5 bp */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

JavaScript

$('.access-item').on('click', function(event){
    var id = $(this).attr('href');
    $(id).attr('tabindex', '-1').focus();
    event.preventDefault();
})