Visually hidden content is read by screen readers but takes no space on screen. Use it to add context sighted users get from layout: "Error:" before a field message, the vehicle name after a repeated "Edit" link, the column a table cell belongs to.
.sr-only — always hidden visually.
.sr-only--focusable — hidden until it receives keyboard focus; for skip links. Add .skip-link for the revealed style.
Don't use it to hide content from sighted users that everyone needs, and never put focusable controls inside plain .sr-only.
For content that should be hidden from everyone use hidden; to hide decoration from assistive tech use aria-hidden="true".
Anatomy
Hidden text — .sr-only (defined in css/base.css, utilities layer)
Revealed skip link — .sr-only--focusable + .skip-link
The first link is hidden until you Tab to it; the second shows its focused look (frozen with .is-focus-visible).
<a href="/vehicles/kx-219/edit">Edit<span class="sr-only"> van KX-219</span></a>
<!-- First element in <body> -->
<a class="skip-link sr-only sr-only--focusable" href="#main">Skip to main content</a>
Do complete repeated link text so it makes sense out of context.
Status: Overdue
Don't hide information sighted users need too; status must be visible text.
Accessibility
The technique (1px box, clip-path: inset(50%), no wrapping) keeps text in the accessibility tree; display: none and visibility: hidden would remove it.
Rules use !important in the utilities layer on purpose: hiding must never be undone by component or app CSS.
Skip links must be the first focusable element and target an element with an id (<main id="main">).
Visually hidden text is translated like any other text; don't hard-code English into CSS content.