Implementation for tabbed Skip Link

skip-link-implemation.html

a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
    color: #fff;
    background-color:#000;
    left: auto;
    top: auto;
    width: 30%;
    height: auto;
    overflow:auto;
    margin: 10px 35%;
    padding:5px;
    border-radius: 15px;
    border:4px solid yellow;
    text-align:center;
    font-size:1.2em;
    z-index:999;
}
            
<a class="skip-main" href="#main">Skip to main content</a>
<h1>Skip to Main Content - Keyboard Accessible</h1>
<ul>
  <li><a href="#">Nav Item 1</a></li>
  <li><a href="#">Nav Item 2</a></li>
  <li><a href="#">Nav Item 3</a></li>
  <li><a href="#">Nav Item 4</a></li>
</ul>
<p id="main" tabindex="-1">This is the main content. In this example you will note that the &quot;Skip to main content&quot; link appears when I tab through the page. This allows keyboard-only users, in addition to screen reader users, an easy way to skip repetitive navigation. The key components to implementing this are</p>
<ol>
  <li>provide a link at the top of the page that says "skip to main content"</li>
  <li>have it link to an internal anchor further down in the page where the main content begins.</li>
  <li>use CSS :focus and :activate to make the skip link visible when the user tabs to it</li>
</ol>
<p>
    View the <a href="https://www.w3.org/TR/WCAG20-TECHS/G1.html">skip to main content</a> implementation on the W3C’s Web Accessibility Initiative’s homepage.
</p>