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

Accessible Friendly Way of Hiding a Label

Comments

Fast Fridays 🏎

Open a file/folder in VSCode from the Terminal

More from this blog

Database GUI's to Boost Development Productivity

How to Setup a Global gitignore File

7 Git GUI's to Boost Development Productivity

Git Worktree

5 Speech-to-Text Apps to Boost Productivity

References

Command Palette

Comments

Fast Fridays 🏎

Open a file/folder in VSCode from the Terminal

More from this blog

References