Hiding Elements Only Visually

This text is perceivable both visually and by screen readers.

Code

HTML
CSS
JavaScript

<p>
  This text is perceivable both visually and by screen readers.
</p>
<p class="visually-hidden">
  This text is perceivable by screen readers.
</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