Moz - SEOとインバウンドマーケティングの実践情報

アクセシビリティとSEOのための、非テキスト要素の最適化――インフォグラフィック・動画のノウハウ

検索エンジンのクローラーにもスクリーンリーダーにも非テキスト要素を適切に伝える方法として、「インフォグラフィック」「動画」を解説

Moz 2016/10/24 7:00 SEO | 解説／ノウハウ

アクセシビリティとSEOに共通する最適化の観点で非テキスト要素（画像・インフォグラフィック・動画）を解説するこの記事は、前後編の2回に分けてお届けしている。
画像の使い方について説明した前回に引き続いて、今回は「インフォグラフィック」と「動画の書き起こし、字幕、キャプション」の最適化について見ていこう。 →まず前編を読んでおく

インフォグラフィック

SEO担当者たちは、リンクを集めて検索順位を上げる手段としてインフォグラフィックを好んできたし、インフォグラフィックやその各要素のページコンテキストを検索エンジンに提供したいとも望んでいる。

しかしアクセシビリティでは、インフォグラフィックが表している内容を簡単に判断できることが求められる。

検索エンジンと異なり、スクリーンリーダーは、インフォグラフィックにリンクしている膨大な数のページのリンクテキストやページコンテキストを使って、インフォグラフィックページのコンテキストを判断することはできない。スクリーンリーダーの場合、すべてはページ上のコードが示すメッセージにかかっているのだ。

複雑なインフォグラフィックはalt属性にとって荷が重すぎることが予想できるだろう。また、パート2で取り上げた、色覚に異常があるユーザーの利用やテキストへの画像使用で起こる問題（ピクセルが粗くなって「可読性」が損なわれる）を考慮する必要もある。

残念ながら、HTMLには<infographic>タグがあって長くて詳しい説明を含めるようなことは、できない（ただし、以下で説明するlongdesc属性の利用は検討の余地がある）。したがって、これから説明する手法をテストし、自分にとって、あるいはその特定の状況にとって何が最適なのかを確認することをお勧めする。

インフォグラフィックですべきこと、すべきでないこと

alt属性でなにもかも説明しようとしない ―― そんなalt属性は、スクリーンリーダーにとって恐ろしく使いにくい（テキストを読み進めたり、コピーペーストしたりができなくなる）。alt属性は本来の用途で利用し、長い説明を加えるには別の方法を選ぼう。
色のコントラスト要件に従うこと ―― インフォグラフィックに使用する色を早めに検討し、色のコントラストの最低要件を満たす色を使うようにしよう。このツールが役立つ。
aria-describedby属性の使用を検討する ―― このaria（アクセシブルリッチインターネットアプリケーション）属性は、画像のaltテキストの後に読み上げられ、長い説明文を含めることもできる。動画の例を見てほしい。ただし、この属性は画像の後に読み上げられるため、くどくなるおそれもある。
longdesc属性を使用する ―― この画像属性では、画像の長い説明文へのリンクを、機械が読み上げ可能な形で追加できる（リンクはページ内でも別のページ上でもよい）。ただし、対応しているブラウザが少ないうえに、私の知る限り、SEO施策としても有効に機能しない。
隠しテキスト属性の使用を検討する ―― 前回の記事で紹介したインフォグラフィックの画像を参照してほしい。ここではHTMLのiframe要素によってCSSクリップ内のインデックス化可能な非表示テキストを使うことで、iframe内の簡単にシェアできる要素として提供されている。
CSSを使ってインフォグラフィックを作成する ―― これは優れたやり方だ。次に示す画像は、同じインフォグラフィックを掲載した2つのページだ。一方は画像ファイルで、その下にテキストとリンクが記載されている。もう一方はインフォグラフィックで、HTMLとCSSを使って作成されたインデックス化可能なテキストとリンクが記載されたものだ。
左：インフォグラフィックは、画像で作られている（ページにはインフォグラフィックのテキストも用意されている）。
右：インフォグラフィックは、CSSでスタイル設定されたHTMLとして作られている（ソースはこちら）。
見た目はどちらもそっくりだ。
コードを見てみよう。以下に、Googleにキャッシュされた各ページのインフォグラフィックのテキストを示す。
画像になっているインフォグラフィックのページ上で提供されているインフォグラフィックテキストのキャッシュ（一部）。
CSSでスタイル設定されたインフォグラフィックのページ上で提供されているインフォグラフィック内のインフォグラフィックテキストのキャッシュ（一部）。
どちらもインデックス化が可能であり、スクリーンリーダーで読み上げることができる。
CSSを利用したページの方は、視覚障害のないユーザーに対してページ上で同じテキストが重複表示されないようにする対策も施されている。
さらにCSSを利用したページでは、非表示にされたdisplay:noneセクションのヘッダーが追加されていることにお気づきだろうか。これはスクリーンリーダーによって読み上げられるが、インフォグラフィックには表示されない。隠しテキストに関する詳しいことは、前回の記事（日本語訳）を参照してほしい。

画像と非テキスト要素に関するツールとリソース

HTML5：テキストの代替となる有効な手法を提供するためのテクニック - アクセシブルな非テキスト要素を作成するための詳しい例
HTML5のアクセシビリティに関するヒント： figure要素とfigcaption要素
アクセシブルなインフォグラフィック
アクセシブルなインフォグラフィックの作成方法
インフォグラフィックにおけるaria-describedby属性
W3：aria-describedby属性を使用して、ユーザーインターフェースコントロールの説明ラベルを提供する方法
色のコントラスト分析ツール（ダウンロード）
色のコントラストチェッカーツール（オンライン）

動画の書き起こし、字幕、キャプション

動画の書き起こし

動画の書き起こし（トランスクリプト）とは、動画のそばに表示され、動画の内容をテキストで説明するもののことだ。

書き起こしテキストは、動画の音声を聞くことができない聴覚障害者を支援する。また、別の言語や方言を使う人に翻訳を示す場合にも便利だ。さらに、騒がしい場所で動画を見たり、音を消した状態で動画を見たりする必要がある場合など、音を聞き取れない状態で動画を見る人にとっても役立つ。

書き起こしは、動画の内容をテキストで説明するものであるため、検索エンジンのためにもなる。

動画の字幕とキャプション

字幕とキャプションは、再生中の動画とタイミングを合わせた形でテキストを表示する。字幕は動画内で発せられた言葉を表示するものだ。一方、キャプションは動画内の言葉に加え、音楽など他の音、音響効果、話している人の名前といった情報も提供する。

動画に合わせてテキストを表示するには、以下のような方法がある。

トランスクリプトをテキストとしてページ上に表示する ―― 動画と同じページにそのままテキストを表示できる。たとえば、このサンゴ礁の動画では、ページ上の動画の下にテキストが表示されている。テキストは、自分で入力することも、専用のツールやサービスを使って作成することもできる（このあとに示すツールとリソースの一覧を参照してほしい）。
HTML5のvideo要素とtrack要素を使用する ―― HTML5のtrack要素をvideo要素やaudio要素とともに使用すると、動画をページに追加し、書き起こしのテキストに拡張子.vtt形式のテキストファイルを指定できる。私の知る限り、グーグルは.vtt形式のテキストファイルをインデックス化できるようだ。ただし、.vtt形式のテキストファイルと、そのファイルが指定されている動画ページとを、グーグルが関連付けているかどうかについては、はっきり確認できる例を見たことはない。
インタラクティブなトランスクリプトを追加する ―― インタラクティブなトランスクリプトを作成できるサービスを使えば、時間を同期させ、動画の再生に沿って順にテキストを強調表示していける。例として、TEDの動画とトランスクリプト（日本語）を見てほしい。
YouTubeのトランスクリプト、字幕、クローズドキャプション ―― これらはYouTubeによって自動的に作成されるもので、精度にばらつきがあるものの、動画をYouTubeに投稿する人にとっては実に便利だ。ただし、自動作成の書き起こし作成技術には注意が必要だ。訛りや背景の雑音などには特に弱い。
とんでもない例として、キーワードの詰め込みをChromeVoxスクリーンリーダーが読み上げている動画に関して、YouTubeが自動作成したトランスクリプトを見てほしい。スクリーンリーダーが読み上げている内容は次のようなものだが、
image. Spacer image. Image. Caption icon off image. Internal link. Privacy slash security. Link.Sponsor image. Search index page description
これを日本語にすると、次のような内容だ。
画像、スペース画像、画像、キャプション、アイコンオフ画像、内部リンク、プライバシースラッシュセキュリティ、リンク、スポンサー画像、検索インデックスページ説明文
しかし、その内容よりも、これをもとに自動作成されたテキストが、次のような検討違いのものになっている点に注目してほしい。
en espana en carnac o moviles en china se dirigen al comico jim carrey algo

動画のアクセシビリティですべきこと、すべきでないこと

動画（および/または音声）のトランスクリプトを用意すること ―― 代替テキストを準備するためには時間と手間がかかるが、検索エンジンの役に立つと同時に、内容を理解するために動画に沿ったテキストを必要とするさまざまな視聴者を支援できる。
トランスクリプトとキャプションは、自分でアップロードするか、YouTubeで自動生成されたものを利用する場合は修正を施す ―― YouTubeが自動的に作成するトランスクリプトは便利だが、たいてい問題があり、間違っている。したがって、編集して修正する必要がある。訂正されたテキストがあれば、それを必要とする視聴者の役に立つと同時に、検索エンジンがトランスクリプトのテキストをインデックス化する場合には、動画ページが検索結果に表示されやすくなる。
コンテキストを提供する ―― それが適切と考えられる場合（特にクローズドキャプション［表示・非表示を切り替えられる字幕］の場合）には、話している人の名前を表示したり、音楽、内容に関連した音、笑い声、拍手、歓声、泣き声といったものに関するコンテキストを提供したりしたい。
スパム行為は行わない ―― キーワードを詰め込むためにトランスクリプトを使用してはいけない。ユーザー体験を大きく損なうし、プラットフォームによっては、トランスクリプトが検索エンジンによってインデックス化されないこともありうる。常に誠実に取り組もう。