Hiding elements visually by moving them off-screen

To hide an element visually means: visually (on a computer screen) it is not perceivable anymore, but non-visual clients (for example screen readers) still perceive it. There is no official technique for doing this, but there's a well proven workaround.

It may be surprising, but the only way to hide an element visually while retaining its perceptibility for screen readers is moving them out of the viewport using absolute positioning:

.visually-hidden {
  position: absolute;
  left:     -10000px;
  top:      auto;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

There are several implementations of this workaround. The one presented here is from CSS in Action (WebAIM.org).

Hiding an element visually

Show HTML code

Show CSS code

+ ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass)

<p>
  This is the first paragraph. It is perceivable both visually and by screen readers.
</p>
<p class="visually-hidden">
  This is the second paragraph. It is perceivable by screen readers (but not visually).
</p>
<p>
  This is the third paragraph. It is perceivable both visually and by screen readers.
</p>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -10000px;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-3-26
NVDA 2023.1 + FF 115	✔ (pass) pass	-	2023-10-3
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-10-3
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-3-27
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.1 + Edge	✔ (pass) pass	-	2023-10-3

For example, this technique is useful to visually hide headings, as described here: Adding visually hidden headings to complete a page's outline.

Toggling visibility on focus

If you are hiding focusable elements using the technique above, make sure that they will appear on screen when getting focus. This way keyboard only users do not "lose" focus when tabbing through a website.

In the following example, press the Tab key to focus and show the (previously invisible) "Jump to content" link.

Toggling visibility of a hidden element on focus

Show HTML code

Show CSS code

+ ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass)

<a class="visually-hidden" href="#content" id="jump">Jump to content</a>
<h1>
  Navigation
</h1>
<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">News</a>
  </li>
  <li>
    <a href="#">Products</a>
  </li>
  <li>
    <a href="#">Shop</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
</ul>
<h1 id="content" tabindex="0">
  Here is the content headline
</h1>
<p>
  And here is some content.
</p>
<p>
  And some more content.
</p>

*:focus {
  outline: 2px dotted;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -10000px;
}
.visually-hidden:focus {
  left: 20px;
  width: auto;
  height: auto;
}

#jump {
  background-color: white;
  padding: 10px;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2023-10-3
NVDA 2023.1 + FF 115	✔ (pass) pass	-	2018-3-27
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-7-13
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-3-27
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.1 + Edge	✔ (pass) pass	-	2023-7-13

Side effects for visual users

The usage of this technique has some side effects for visual users:

• When searching in the browser for text, elements visually hidden with this technique are still found.
  • This can be confusing, as some of the results may not be visible (though the browser scrolls to the correct viewport position when toggling through the results).
• When selecting text (for example for copying it to the clipboard), elements that were visually hidden using this technique are also selected (if they are between the selection start and selection end position).
  • This can be confusing, as the selected text may differ from what is expected.

Further possibilities using ARIA

Instead of moving elements out of the viewport, it is possible to replace or add text content specifically for screen readers using ARIA: Labelling elements using aria-label and aria-labelledby.