Kevin De Baerdemaeker

Visually Hidden Elements

Modified 2022-09-23

If an element needs to be hidden, but not from the accessibility tree. 

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

For example, a copy icon button which has no visible text in the browser, still needs to be announced in the accessibility tree. 

<style>
  <<visually-hidden>>
</style>
<button>
  &#10006;
  <span class="visually-hidden"></span>
</button>
<iframe src=".snippets/html/visually-hidden.html" />

References

Backlinks