Visually Hidden

With .visually-hidden, developer can visually conceal an element while still allowing assistive technology (like screen readers) to see it. To visually conceal an element by default and display it when it is focused (for example, by a user who only uses the keyboard), use the .visually-hidden-focusable style. When a container with the property .visually-hidden-focusable is applied, the container will be visible when any of its child elements gains focus.

<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>

Both visually-hidden and visually-hidden-focusable can also be used as mixins.

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}