Visually hidden

Text for screen readers only: clipped to a single pixel, still read aloud and still in the tab order.

.sr-onlyCSS only

Examples

The links read "Edit Atlas" and "Edit Harbor" to a screen reader; sighted users see "Edit".

The swatch picker shows colours; .sr-only gives each radio a name a screen reader can read.

.sr-only Any element. Absolutely positioned, 1×1px, clipped and unwrapped, so it takes no space and draws nothing.

Use it to add context the visual layout already gives (which row a button acts on), not to hide content from everyone. For that, use hidden.
Don't put it on a focusable element: it stays in the tab order but its focus ring is clipped away. Hide the text inside the control instead.
Prefer aria-label for naming a single control; .sr-only is for text inside the flow of a sentence or a list.