Visually Hidden Utility (.sr-only)

<!-- The utility class -->
<style>
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
</style>

<!-- Common use cases -->

<!-- Icon-only button — give it a real label -->
<button>
    <svg aria-hidden="true" width="20" height="20"><!-- trash icon --></svg>
    <span class="sr-only">Delete user Alice</span>
</button>

<!-- Form field with visible icon label only -->
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search…">

<!-- Reading-order clarification for screen readers -->
<p>Find us on <span class="sr-only">social media at</span> @example.</p>