Visually hidden

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

On this page

Title for screen readersSkip to main contentA container with a focusable element.Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with visually-hidden attribute.

Use visually-hidden="focusable" attribute to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user).

visually-hidden="focusable" attribute can also be applied to a container–thanks to :focus-within, the container will be displayed when any child element of the container receives focus.

Skip to main content
A container with a focusable element .
vue
<template>
  <div
    style="height: 25px"
  >
    <b-h
      level="2"
      visually-hidden
    >
      Title for screen readers
    </b-h>
    <b-a
      visually-hidden="focusable"
      href="#content"
    >
      Skip to main content
    </b-a>
    <b-div visually-hidden="focusable">
      A container with a
      <b-a href="#">
        focusable element
      </b-a>
      .
    </b-div>
  </div>
</template>