Brown Markup Library

Visibly Hidden

Allows you to add text that can be read by a screen reader but does not visibly show up on the page. A neat accessibility trick.

Add the css class to your style sheet.

Rendered Component

Additional text hidden after this. This is the additional hidden text only for screen readers

Markup

HTML

<p>
  Additional text hidden after this.
  <span class="screen_reader_text"
    >This is the additional hidden text only for screen readers</span
  >
</p>

Styling

CSS

.screen_reader_text {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}