そもそも.sr-onlyとは
Bootstrap 4 や Tailwind CSS などの CSS フレームワークで定義されているクラス。sr は「ScreenReaders（スクリーンリーダー）」の略称。
スクリーンリーダーのような支援技術ではテキストが必要だが、視覚的には非表示にした方が良いような要素に使われる。これはdisplay: noneだとスクリーンリーダーでは読み上げられないため、視覚的に非表示にするような実装方法となっている。
<span class="sr-only">Posted on: </span>
<time class="updated" datetime="2017-02-18T17:16:40+00:00">18 February 2017</time>
Bootstrap 4
/* Bootstrap 4 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Tailwind CSS
/* Tailwind 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-width: 0;
}
Bootstrap 5
ちなみに Bootstrap 5 では.sr-onlyの定義はなくなり、.visually-hiddenというクラスに置き換わっている。
Visually hidden · Bootstrap v5.2
.visually-hidden,
.visually-hidden-focusable:not(:focus) {
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;
}
Tailwind CSS の実装とほぼ同じ。