# 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](https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements)
-  [Revisting aria-label versus a visually hidden class](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/?mc_cid=6eef277a4d&mc_eid=%5BUNIQID%5D)