visually-hidden
visually-hidden is a widely used CSS class name for text that a stylesheet removes from the visible layout while keeping it readable for screen readers. The name does not describe a mechanism of its own but the pattern this glossary explains in its sr-only entry. Its technical core is a small rule block: position:absolute, a box of one pixel, overflow:hidden and clipping via clip-path. It deliberately avoids display:none and visibility:hidden, because both hide content from assistive technologies as well. Frameworks and utility libraries ship the same rules under names of their own, frequently sr-only. Even the W3C does not spell the name consistently: WCAG technique C7 calls the class visually-hidden, while the WAI tutorial on form labels uses visuallyhidden. There is no standardised class name and no binding reference CSS. The snippets differ in detail from source to source; C7, for instance, carries the older clip alongside the newer clip-path. The number one misuse: applying the class to content nobody should receive – that is a job for display:none.