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.

Title for screen readers

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