Visually hidden
Use these helpers to visually hide elements but keep them accessible to assistive technologies.
Example
Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .sr-only. Use .sr-only-focusable to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). .sr-only-focusable 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.
<h2 class="sr-only">Title for screen readers</h2>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<div class="sr-only sr-only-focusable"> A container with a
<a href="#">focusable element.</a>
</div>
