Accessible Friendly Way of Hiding a Label

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;
}

References

• Web Accessibility Tutorials - Labeling Controls
• Revisting aria-label versus a visually hidden class