Visually hidden (sr-only)
Text hidden from the screen but still in the accessibility tree, so screen readers read it and sighted users never see it.
See it
What it is
Visually hidden text is present in the DOM and in the accessibility tree but takes up no visible space. It is how you give an icon-only button a name, add 'Read more about the Q3 report' to a link that visibly says 'Read more', label a search input with no room for a label, or hold the text a live region announces. Tailwind ships it as sr-only, Bootstrap as visually-hidden, and most design systems call it one of those two.
The canonical recipe is a 1px clipped box: position absolute, width and height 1px, padding and border zero, overflow hidden, white-space nowrap, and clip-path inset(50%). The modern shorthand is simply clip-path with overflow hidden. Whatever you copy, add a focusable variant that undoes all of it on :focus, because that is exactly what a skip link needs.
What it is not: display:none, visibility:hidden, the hidden attribute, or aria-hidden='true'. Every one of those pulls the content out of the accessibility tree, so nothing gets read. opacity:0 breaks the other way: the text generally stays in the tree and stays interactive, which is exactly why it is the wrong tool. You end up with invisible links and buttons that still take focus and still swallow clicks. Also resist narrating the whole interface into hidden spans. Screen reader users want the same page everyone else gets, not a director's commentary track, and text-indent:-9999px hacks reverse badly in right-to-left languages.
Ask AI for it
Add a reusable visually hidden utility and use it here. Define an sr-only class with position:absolute, width:1px, height:1px, padding:0, margin:-1px, overflow:hidden, white-space:nowrap, border:0, and clip-path:inset(50%), plus an sr-only-focusable variant that resets all of it on :focus. Apply it to give every icon-only button a text name and to extend vague link text like 'Read more' with its destination. Do not use display:none, visibility:hidden, opacity:0, or aria-hidden for this.