Toggling Visibility of a Hidden Element on Focus

Navigation

Here is the content headline

And here is some content.

And some more content.

Code

<a class="visually-hidden" href="#content" id="jump">Jump to content</a>
<h1>
  Navigation
</h1>
<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">News</a>
  </li>
  <li>
    <a href="#">Products</a>
  </li>
  <li>
    <a href="#">Shop</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
</ul>
<h1 id="content" tabindex="0">
  Here is the content headline
</h1>
<p>
  And here is some content.
</p>
<p>
  And some more content.
</p>
*:focus {
  outline: 2px dotted;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -10000px;
}
.visually-hidden:focus {
  left: 20px;
  width: auto;
  height: auto;
}

#jump {
  background-color: white;
  padding: 10px;
}
NIL