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;


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.


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