そもそも.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 4Screenreaders · Bootstrap /* Bootstrap 4 *
![`.sr-only`のような非表示スタイルとSEOの関係性の調査](https://cdn-ak-scissors.b.st-hatena.com/image/square/93eb3f2d63703415006314c96d6a8c9cafb458ca/height=288;version=1;width=512/https%3A%2F%2Fb.0218.jp%2Fimages%2Fogp%2F202110191552.webp%3Fts%3D46803188dfd811b369e9102920c1338b024c4f71)