A Note on the Series:
Fast Fridays 🏎 is a series where you will find fast, short, and sweet tips/hacks that you may or may not be aware of. I will try to provide these (fairly) regularly on Fridays.
Occasionally, we want the ability to hide a label. However, we have to ensure that we think about this from an accessibility standpoint so that those using screen readers are taken into consideration and have a comfortable user experience.
Although one-line styles like display: none and visibility: hidden will achieve the desired visual effect, this is not suitable for users of screen readers or other assistive technology.
Below is a code snippet I've seen referenced time and time again as an accessibility friendly way to hide a label:
.hide-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}