1. Docs
2. Helpers
3. Visually Hidden

Visually Hidden

Use .velin-sr-only to hide an element visually while keeping it accessible to assistive technologies such as screen readers. Use .velin-sr-only--focusable to make the element visible again when it receives focus.

How it works

.velin-sr-only clips the element to a 1×1 px region using a combination of clip, clip-path, fixed sizing, and overflow: hidden. The element is removed from the visual flow but remains in the accessibility tree so screen readers can announce it.

.velin-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.velin-sr-only--focusable:focus,
.velin-sr-only--focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

Example: hidden heading

Add a visually hidden heading to give screen-reader users a landmark for a navigation section that sighted users understand from context alone.

<nav aria-labelledby="nav-heading">
  <h5 class="velin-sr-only" id="nav-heading">Main navigation</h5>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
  </ul>
</nav>

Example: skip link

A skip-to-content link is hidden until the user tabs to it. Combine .velin-sr-only with .velin-sr-only--focusable so keyboard users can jump past repeated navigation.

<a href="#main-content" class="velin-sr-only velin-sr-only--focusable">
  Skip to main content
</a>

Example: form labels

When a visible label is unnecessary (e.g. a search input with a placeholder) you can hide the <label> while keeping the form accessible.

<form class="d-flex align-items-center" style="gap:.5rem">
  <label for="sr-search" class="velin-sr-only">Search</label>
  <input type="search" id="sr-search" class="form-control form-control-sm"
         placeholder="Search…">
  <button type="submit" class="btn btn-sm btn-primary">Go</button>
</form>

When to use which technique

There are several ways to hide content. Choose the right approach depending on whether the element should remain accessible.