Screen Reader Text

Sometimes we want to give specific information only to users of screen reader software, for example, interaction instructions or extra context provided by visual elements of the page. Most software will not read out elements hidden with display:none;. The following code snippet allows you to hide text from sighted users but make it available to screen readers.

/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}