Hide visually, show for AT

visually-hidden.css

/**
 * = Visually Hide text
 *
 * Text remains accessible to AT such as Screen Readers
 * Updated version: 
 * Taken from http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 *
 * ------------------------------------------------------------------------- */
.visually-hidden {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

/* Remain focusable, e.g. when using skip-links */
.visually-hidden--focusable:focus,
.visually-hidden--focusable:active {
  clip-path: none !important;
  height: auto !important;
  overflow: visible !important;
  position: static !important;
  width: auto !important;
  white-space: normal !important;
}

Updated based on info from: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/ and https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.kwz0kaoqu

TODO: investigate the margin: -1px; one occasionally sees: https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/css/main.css#L156

It was nowhere and suddenly appeared in H5BP.
Then picked up by others such as Drupal, Bootstrap..

E.g.
https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
https://www.drupal.org/node/766444
http://webaim.org/techniques/css/invisiblecontent/
http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content
http://a11yproject.com/posts/how-to-hide-content/

Then it appeared:

h5bp/html5-boilerplate#194 (comment)
https://www.drupal.org/node/1057912#comment-4202618
https://www.drupal.org/node/1328970
https://www.drupal.org/node/718922
https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss#L10