Visually hidden / sr-only
The "visually hidden" pattern (also called `sr-only` or `screen-reader-only`) is a CSS technique that hides text from sighted users while keeping it available to screen readers — used for skip links, button labels on icon-only buttons, and form-error context.
Detailed explanation
The standard implementation clips the element to a 1×1 pixel box, sets `position: absolute`, and uses `clip-path: inset(50%)` to ensure the text is not painted but is still in the accessibility tree. Setting `display: none` or `visibility: hidden` would hide the text from screen readers too, defeating the purpose.
Common uses on a Shopify storefront: a "Skip to main content" link that becomes visible on focus; a `<span class="sr-only">Search</span>` inside an icon-only search button; an `<h2 class="sr-only">Filters</h2>` to give screen-reader users a landmark inside a sidebar.
How this applies to Shopify stores
Most Shopify themes ship a `.visually-hidden` or `.sr-only` utility class. AccessComply's deterministic agents use this class when adding hidden labels to icon buttons or skip links during fix runs.
Primary source: w3.org