SEO スクリーンリーダー専用テキストと隠しテキストのスパム判定のメモ

納品してもらった WEB サイトで h1 タグのCSSが下記のような非表示になっていました

h1.visually-hidden {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

Bootstrap などにも .sr-only のようなスクリーンリーダー専用となる非表示にできるクラスが定義があります

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.
cf. Screenreaders · Bootstrap

非表示の隠しキーワードは SEO のペナルティになるという記憶があったのですが、現代ではアクセシビリティ面でスクリーンリーダー用に非表示にしたテキストを用意する事もあるので非表示テキストが SEO 的にどうなっているのか気になって改めてざっくり調べてみました。

Google のウェブ検索のスパムに関するポリシー

隠しテキストと隠しリンク

隠しテキストや隠しリンクは、検索エンジンを操作することのみを目的としてページにコンテンツを配置しながら、人間のユーザーには見えにくいようにする行為です。Google のポリシーに違反する隠しテキストや隠しリンクの例としては、次のようなものが挙げられます。

白の背景で文字の色を白にする

テキストを画像の背後に置く

CSS を使用してテキストを画面の外に配置する

フォントサイズまたは不透明度を 0 に設定する

目立たない 1 文字（段落の中頃にあるハイフンなど）のみをリンクにすることで隠す

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

追加コンテンツの表示 / 非表示を切り替えるアコーディオンやタブ形式のコンテンツ

複数の画像やテキスト段落を切り替えるスライドショーやスライダー

ユーザーが要素に対してなんらかの操作をしたときに追加コンテンツを表示するツールチップや類似のテキスト

スクリーンリーダーを使用するユーザーのエクスペリエンスを高めることを目的として、スクリーンリーダーのみがアクセスできるテキスト

cf. Google ウェブ検索のスパムに関するポリシー | Google 検索セントラル | ドキュメント | Google Developers

基本的に隠しテキストや隠しリンクはペナルディになる
ただし、スクリーンリーダーがアクセスできるテキストはスパムにならない

非表示テキストでスクリーンリーダーがアクセス可能なものと不可能になるものがある

Techniques for hiding content

cf. WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users

🙅 ペナルティを受ける可能性がある CSS

display:none, visibility: hidden
- スクリーンリーダがアクセスできない非表示の方法
width:0px, height:0px や font-size: 0px のような 0ピクセルサイズになるもの
- 高さ・幅がない要素は殆どのスクリーンリーダーが読み取れない

🤔

text-indent: -10000px
- 画面外から外れているだけなのでスクリーンリーダーはアクセスができる
- ただしフォーカス可能な要素だと見えないがフォーカスしてしまうのでキーボード操作のUXを損ねる可能性がある

🙆 スクリーンリーダーが読み取れる非表示テキスト

1. Absolutely positioning content off-screen

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

⚠ この方法はリンクやフォームなどナビゲーション可能な要素はフォーカスができてしまうので使用しないほうが良い

2. CSS clip

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

clip を用いて視覚的に非表示にする方法もスクリーンリーダーでは読み取ることができる

結論と考察

CSSの書き方でペナルティを受ける非表示テキストとスクリーンリーダー用だと判断される非表示テキストがある
h1 のような見出しをスクリーンリーダー用にした場合ペナルティを受けるのかははっきりしない
- 現状 h1 をスクリーンリーダー専用の非表示テキストにしていても検索結果にも出ているのでペナルティは受けてなさそう
おそらく単純なコードでの判断ではなく、機械学習などを用いて evil な隠しキーワードかどうかを判定しているのではないか？
ただ h1 のような文章構造を表すセマンティック要素がスクリーンリーダーだけで必要になるようなケースはほぼ無い (画像表現でも alt を設定するなどできるので)と思うので、セマンティック要素を積極的にスクリーンリーダー専用の非表示テキストする必然性は薄そう