A17 SCSS Utilities

Description

Visually hide text, but keep that text available to screen reader users.

Output

app.css

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

SCSS Usage

_component.scss

.a11y-text {
  @include visually-hidden;
}

Demo

document.html

<p class="sr">Screen reader only text</p>