Visually hidden

Notation #

It is often useful to hide elements on all devices except screen readers (where they are displayed for making the page accessible). The following classes are available for visually hiding elements:

• .visually-hidden — hidden on all devices except assistive technologies (such as screen readers)
• .visually-hidden-focusable — displayed only when the element is focused (e.g. by a keyboard-only user)

Example #

The classes are shown in action below. Try changing the focus by pressing the tab key. You should see a link pop up when it is focused. The .visually-hidden-focusable class 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. This is shown with the second link. And of course, the heading at the start will only be visible to assistive technologies.

Please note that some operating systems will not allow keyboard-focus on links by default, such as macOS. You may need to change your OS settings to see the link in the example below.

<!-- Visually hidden -->
<h2 class="visually-hidden">Title for screen readers</h2>

<!-- Visible when focused -->
<a href="#" class="visually-hidden-focusable">Skip to main content</a>

<!-- Container visible thanks to :focus-within -->
<div class="visually-hidden-focusable">
  <h6>Footer</h6>
  <a href="#">Go to top</a>
</div>