Skip to content

Instantly share code, notes, and snippets.

@BillClinton
Last active December 16, 2019 05:12
Show Gist options
  • Select an option

  • Save BillClinton/1d153b418258d67c16c65cf26efd5f70 to your computer and use it in GitHub Desktop.

Select an option

Save BillClinton/1d153b418258d67c16c65cf26efd5f70 to your computer and use it in GitHub Desktop.

Screenreader only class

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); /* IE 6/7 */
  clip: rect(0,0,0,0); // deprecated
  clip-path: rect(0,0,0,0); // not fully supported
  border: 0;
  white-space: nowrap;
}

amphtml screen reader class

/**
 * Makes elements visually invisible but still accessible to screen-readers.
 *
 * This Css has been carefully tested to ensure screen-readers can read and
 * activate (in case of links and buttons) the elements with this class. Please
 * use caution when changing anything, even seemingly safe ones. For example
 * changing width from 1 to 0 would prevent TalkBack from activating (clicking)
 * buttons despite TalkBack reading them just fine. This is because
 * element needs to have a defined size and be on viewport otherwise TalkBack
 * does not allow activation of buttons.
 */
.i-amphtml-screen-reader {
  position: fixed !important;
  /* keep it on viewport */
  top: 0px !important;
  left: 0px !important;
  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
     before allowing buttons to be activated. */
  width: 4px !important;
  height: 4px !important;
  /* visually hide it with overflow and opacity */
  opacity: 0 !important;
  overflow: hidden !important;
  /* remove any margin or padding */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* ensure no other style sets display to none */
  display: block !important;
  visibility: visible !important;
}

.i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
  left: 8px !important;
}
.i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
  left: 12px !important;
}
.i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
  left: 16px !important;
}

https://github.com/ampproject/amphtml/blob/9dff4cc0/css/ampshared.css#L155-L195

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment