Three and a half weeks into bootcamp, two projects submitted, one test written, infinite cups of coffee consumed. Now we’ve started learning ~programming~ and have bid farewell to the safety and comfort of our HTML and CSS review. In honour of the occasion, here is an ode to a valuable bit of CSS, the visuallyHidden class.

The visuallyHidden class (or whatever class name you choose to attach to this list of styles) is often simply copied and pasted from one project to the next. I had never really given much thought to what exactly the different components did…until now!

.visuallyHidden:not(:focus):not(:active) { 
     position: absolute; 
     width: 1px; 
     height: 1px; 
     margin: -1px;
     border: 0;
     padding: 0;
     white-space: nowrap;
     overflow: hidden;     
     clip-path: inset(100%);
     clip: rect(00 0 0);
}

1. Position: absolute removes the element from the flow of the page, collapses the space it once occupied, and removes it from the flow of the page.
2. Width and height of 1px make it very tiny, but still has area so that other properties further down will still work.
3. The negative margin pulls up succeeding elements to overlap the visuallyHidden element.
4. Border and padding of 0 are just making sure there’s no unnecessary bulk.
5. White-space: nowrap means that any content within the element will not wrap, but continue on in a straight line.
6. Overflow: hidden ensures that all of that now overflowing content is clipped and made invisible.
7. Finally, clip and clip-path are added measures that cut down the size of the element to literally nothing. Clip is a deprecated property that has been replaced over time by clip-path but both are included just to be safe.

The visuallyHidden class is extremely useful, and my best friend when it comes to making unseen content accessible. Unlike “display: none” or “visibility: hidden” which hide their content from the viewer and the screen-reader, visuallyHidden only removes the visible element from the page. It’s content is still read by a screen-reader, ensuring that it’s content is still accessible. You can think of those other two as pseudo “delete” properties because they appear to wipe away that content as if it never existed for anyone. They should only be used if you’re going to replace that content in some other way.

Some of the most common places that I use visuallyHidden are on form input labels that I don’t want shown on the page and for labelling social icons acting as links. Rather than having a label for my form input that says “Email” or “Name” or “Fave doggo”, I like the aesthetic of the placeholder text providing that context for what should be filled in. But because a screen-reader won’t read placeholder text, a visually impaired user will have no way of knowing what that input field is for! We should keep the label in our HTML for the sake of the screen-reader, and by adding a class of visuallyHidden, we give the illusion that it’s not there, while providing that much-needed accessibility. Similarly for social icons (or any icon that conveys meaning), a span with a class of visuallyHidden containing the label for what that icon does can be placed beside the icon to provide the necessary context.

Sometimes you will need a display: none or a combo of position: absolute and left: -999px to remove content from the screen. But it’s important to know what the best tool for the job is and in terms of accessibility, I think visuallyHidden is a winner!