skiplinks

skiplinks.scss

.skiplinks {
    position: absolute;
    top: 3px;
    left: 10px;
    width: 100px;
    
    a {
        color: #000; // force black for optimal contrast
        font-size: 0.9167em;
        display: inline-block;
        @include visuallyhidden;
        
        &:focus {
            clip: auto;
            height: auto;
            overflow: visible;
            width: auto;
            z-index: 10000;
        }
    }
}



// use for focusable elements
@mixin visuallyhidden(){
	border: 0;  
	clip: rect(0,0,0,0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

skiplinks.twig

<!-- START BLOCK skiplinks -->
     <div class="skiplinks">
         <p>
             <a href="#content" tabindex="1" id="skip-to-content">{{ l('Skiplink:Inhoud') }}</a>
             <a href="#navigation" tabindex="2" class="skiplink-to-menu">{{ l('Skiplink:Menu') }}</a>
         </p>
    </div>
<!-- END BLOCK skiplinks -->