Kevin Powell - Community•8mo ago

visually hidden class

Hey, could somebody please explain in which use cases a visually hidden class should be used on an element and on which elements? Along with this could I ask why we need to use the clip and position: absolute properties within this class? Thanks in advance!

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

2 Replies

Kevin Powell•8mo ago

The main reason we use that is to add context that might be obvious to a sighted user, but where more information would be handy for someone using a screen reader. This article does a great job of explaining it in more detail, and also explaining the CSS behind it: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

Inclusively Hidden | scottohara.me

There are various ways to hide content in web interfaces, but are you aware of the different ways they can impact the accessibility of the ‘hidden’ content? ...

snxxwyyOP•8mo ago

Ah awesome, thank you, I’ll take a look into that.

Gaming

Programming

visually hidden class