Visually hidden

Helpers to visually hide elements but keep them accessible to assistive technologies.

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.

Title for screen readers

Skip to main content

Go to top
<!-- 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">
  <a href="#">Go to top</a>
Up next
Background utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.