零弐壱蜂

`.sr-only`のような非表示スタイルとSEOの関係性の調査

6 min read
hiroweb developer

そもそも.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

Screenreaders · Bootstrap

/* 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

Screen Readers - 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 の実装とほぼ同じ。

非表示要素はブラックハット SEO ではないのか

古くからブラックハット SEO として、サイト内に見えないテキスト（隠しテキスト）を記述して検索順位を上げるという手法があった。

Google ウェブ検索のスパムに関するポリシーによると、Google のガイドライン違反になる隠しテキストのパターンは下記の通り。

  • 白の背景で文字の色を白にする
  • テキストを画像の背後に置く
  • CSS を使用してテキストを画面の外に配置する
  • フォントサイズまたは不透明度を 0 に設定する
  • 目立たない 1 文字（段落の中頃にあるハイフンなど）のみをリンクにすることで隠す

仮に.sr-onlyの実装にtext-indent:-9999pxやfont-size: 0が含まれてしまうと上記の条件に合致してしまい隠しテキストとして判定されてしまうと思われる。実際、フレームワークの実装ではこれらは含まれていない。

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

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

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

いつの間にかポリシーが更新されており、隠しテキストには当たらないということが明言されるようになった。

現在では、コンテンツの表示 / 非表示を動的に制御する方法を活用して、ユーザー エクスペリエンスを高めるウェブデザイン要素が多数存在します。以下の要素は Google のポリシーに違反していません。

  • 追加コンテンツの表示 / 非表示を切り替えるアコーディオンやタブ形式のコンテンツ
  • 複数の画像やテキスト段落を切り替えるスライドショーやスライダー
  • ユーザーが要素に対してなんらかの操作をしたときに追加コンテンツを表示するツールチップや類似のテキスト
  • スクリーン リーダーを使用するユーザーのエクスペリエンスを高めることを目的として、スクリーン リーダーのみがアクセスできるテキスト

.sr-onlyについては、スクリーンリーダーのエクスペリエンスを高めることを目的としているため問題ないと言える。

参考リンク

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