`.sr-only`よう表示スタイルSEO関係調査

4 min read

そもそも.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:-9999pxfont-size: 0が含まれてしまうと上記の条件に合致してしまい隠しテキストとして判定されてしまうと思われる。実際、フレームワークの実装ではこれらは含まれていない。

隠しテキストがすべて偽装行為と見なされるわけではありません。スクリーン リーダー、モバイル ブラウザ、プラグインなしのブラウザ、低速接続環境でアクセスする多くの人間のユーザーもそのようなコンテンツを表示できないため、その場合も説明テキストがあれば役立ちます。

ガイドライン違反に合致していないのであれば隠しテキストには当たらず、アクセシビリティのため、スクリーンリーダーのために非表示テキストとして使われているのであれば問題ないとも読み取れる。当然、使い方が悪ければガイドライン違反になると思われる。

Google からの明言はないが、主要なフレームワークやさまざまなサイトでも使用されている手法であるため、基本的な使用方法であれば問題ないと思われる。

参考リンク

隠しテキストと隠しリンク  |  検索セントラル  |  Google Developers

このページをシェアする

関連タグ

関連記事

Googleが配信している日本語ウェブフォント一覧

はじめに(結論) / M+ 1p / Rounded M+ 1c / はんなり明朝 / こころ明朝 / さわらび明朝 / さわらびゴシック / ニクキュウ / ニコモジ / Noto Sans Japanese / まとめ

[Gmail] 未読のメールのみを表示する方法

未読のメールのみを検索する方法 / 未読のショートカット

[CSS] 国内の主要サイトのfont-familyを調べてみた

日本の主要サイトとは / font-family 一覧 / 関連

ブログが謎のサイトにコピーされた時の対処方法

きっかけ / 状況 / 対応方法 / 対応した内容 / Googleに通報する