Visually hidden

Use these helpers to visually hide elements but keep them accessible to assistive technologies.

Use .visually-hidden to hide content that should be available only to screen readers and other assistive technologies.

<button class="btn btn-primary">
  Save changes
  <span class="visually-hidden">(not visible)</span>
</button>

Visually hidden, focusable

Use .visually-hidden-focusable to hide an element initially, but display it when the user focuses it (for example, a "skip to main content" link).

<a class="visually-hidden-focusable" href="#main">Skip to main content</a>

@import "node_modules/boodoo/scss/mixins";

.example {
  @include visually-hidden();
}