sr-only (screen-reader-only) class
`.sr-only` is a CSS utility class that hides content visually while keeping it readable by screen readers — the standard pattern for adding accessible text labels that should not be visually displayed.
Detailed explanation
The canonical `.sr-only` rule positions the element off-screen with zero width/height/clip but keeps it in the accessibility tree: ```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: 0; } ```
Common uses: providing text labels for icon-only buttons that already have visual identification, supplementing color-only status indicators with text equivalents (`<span class="sr-only">Out of stock</span>`), and adding skip-link or section-label text invisible to sighted users.
How this applies to Shopify stores
AccessComply's deterministic-fix pipeline injects `.sr-only` text labels for color-only stock indicators, icon buttons, and pagination indicators. The class is added to the theme's base CSS once, then referenced wherever a non-visual text label is needed.
Primary source: tpgi.com