What are the different ways to visually hide content (and make it available only for screen readers)?

These techniques are related to accessibility (a11y).

Small/zero size

width: 1px; height: 1px combined with CSS clip to make the element take up (barely) any space on the screen at all.

Don't use width: 0; height: 0

Using width: 0; height: 0 is not recommended because search engines might penalize this as malicious intent, such as keyword stuffing.

Absolute positioning

position: absolute; left: -99999px will position an element way outside the screen. However, as per WebAIM's article:

Don't hide interactive elements off-screen

Navigable elements, such as links and form controls, should not be hidden off-screen. They would still be navigable by sighted keyboard users, but would not be visible to them, unless they are styled to become visible when they receive keyboard focus.

Use this only when your content contains only text.

Text indentation

text-indent: -9999px. This only works on text within block elements. Similar to the absolute positioning technique above, focusable elements given this style will still be focusable, causing confusion for sighted users who use keyboard navigation.

Incorrect ways

The following ways are incorrect because they hide content from the user AND screen readers, which is the wrong behavior if the purpose is to expose the content to screen readers only.

display: none
visibility: hidden
hidden attribute

Techniques in the wild

Use a battle-tested utility class

Combine the approaches above to make sure it works properly in all browsers. Instead of implementing your own way to remove an element from the rendering tree and the a11y tree, use one of the following utilities from mature CSS frameworks, which have been battle-tested on many websites.

Tailwind CSS

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

Bootstrap CSS

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

References

CSS in Action - Invisible Content Just for Screen Reader Users