Visibility Utility

Our visibility utility is constructed as follows:

.visually-hidden { 
  display: block;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px);
  white-space: nowrap;
  position: absolute;
}

Purpose

The visibility utility is to help create an accessible visually hidden element. Often designers give us a design where certain expected elements are missing, let's take a form input label as an example. Labels are expected on inputs and are great for accessibility, but often designers use placeholders in inputs. We can use a visually hidden class on the label to make sure the label is within the document flow and remain available for screen readers. You can read more about this here.

Example

<label for="name" class="visually-hidden">Your full name</label> <input type="text" id="name" placeholder="Your full name" />