Visually hidden

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.

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