JSFiddle - React, Tailwind, and code Playground

by gunjan_prmr

HTML

<a href="#main" id="skiplink" class="skip">Skip to content</a>

<main role="main" id="main" tabindex="-1">
  <div>
    <h1>Main Content Starts Here</h1>
    <p>This is a modified example of "Skip Navigation" or "Skip to Content" links. Unlike most common examples, this one actually moves tab focus to the content container.</p>
  </div>
</main>

CSS

.skip {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
}

a.skip:active, 
a.skip:focus, 
a.skip:hover {
  left: 0; 
  top: 0;
  width: auto; 
  height: auto; 
  overflow: visible; 
}

main:focus {
  outline: 0;
}

JavaScript

$("#skiplink").click(function() {
    alert("1");
    $('main').focus();
  });