そもそも.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,
.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 の実装とほぼ同じ。
参考リンク
非表示要素はブラックハット SEO ではないのか
古くからブラックハット SEO として、サイト内に見えないテキスト（隠しテキスト）を記述して検索順位を上げるという手法があった。
Google のガイドライン違反になる隠しテキストのパターンは下記の通り。
- 白の背景で白のテキストを使用する
- テキストを画像の背後に置く
- CSS を使用してテキストを画面の外に配置する
- フォントサイズを 0 に設定する
- 小さな 1 文字（段落中のハイフンなど）のみをリンクにしてリンクを隠す
仮に.sr-onlyの実装にtext-indent:-9999pxやfont-size: 0が含まれてしまうと上記の条件に合致してしまい隠しテキストとして判定されてしまうと思われる。実際、フレームワークの実装ではこれらは含まれていない。
隠しテキストがすべて偽装行為と見なされるわけではありません。スクリーン リーダー、モバイル ブラウザ、プラグインなしのブラウザ、低速接続環境でアクセスする多くの人間のユーザーもそのようなコンテンツを表示できないため、その場合も説明テキストがあれば役立ちます。
ガイドライン違反に合致していないのであれば隠しテキストには当たらず、アクセシビリティのため、スクリーンリーダーのために非表示テキストとして使われているのであれば問題ないとも読み取れる。当然、使い方が悪ければガイドライン違反になると思われる。
Google からの明言はないが、主要なフレームワークやさまざまなサイトでも使用されている手法であるため、基本的な使用方法であれば問題ないと思われる。