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

アクセシビリティとSEOのための、非テキスト要素の最適化――画像のノウハウ

非テキスト要素の「画像」「インフォグラフィック」「動画」を、検索エンジンのクローラーにもスクリーンリーダーにも適切に伝える方法を解説
tweet35はてなブックマークに追加 印刷用
この記事の内容はすべて筆者自身の見解であり(ありそうもないことだが、筆者が催眠状態にある場合を除く)、Mozの見解を反映しているとは限らない。

アクセシビリティとSEOに共通する最適化を解説するこのシリーズ、すでに公開した2つの記事では「サイトとページ構造における共通点」(英語記事)および「書式設定とリンクにおける共通点」(Web担掲載記事)を取り上げた。

シリーズの最後となるこの記事では、画像や動画といった非テキスト要素(メディア要素)のコーディングにおける、アクセシビリティとSEOの共通点について話をしたい。

画像と非テキスト要素

オンラインの画像は、視覚に障害がある人たちには判読できないという問題が起こることがあるのは、ご想像のとおりだ。だが、幸いにも、この問題に利用できるテクノロジーがある。画像や非テキスト要素に適切なコーディングを施すことで、問題の解決を支援できるのだ。

画像と非テキスト要素には、たとえば次のようなものがある。

  • 画像
    • グラフ
    • ワードアート
    • 装飾画像
    • 背景画像
    • ウェブカメラ画像
    • 写真
    • など
  • インフォグラフィック
  • イメージマップ
  • アニメーション
  • グラフィカルボタン
  • Captcha

ここでは、画像と非テキスト要素の最適化によってアクセシビリティを高める方法をいくつか紹介しよう。

alt属性

SEOでは、画像の内容を検索ボットに説明するために画像のalt属性を使う。

またalt属性は、画像がリンクになっている場合に、画像のリンク先の内容を説明するためにも使われる。リンクでは、alt属性がキーワードを含んだアンカーテキストのような働きをし、グーグルがリンク先ページの内容を理解する手助けとなる。

画像のalt属性は、スクリーンリーダーにも読み上げられる。スクリーンリーダーを使ったことがある人は多くないだろうから、どんな風に読み上げているのかを動画で簡単に示した例を紹介しておく(音声をオンにして視てほしい)。

alt属性は、アクセシビリティにもSEOにも、最適化のメリットをもたらす。

ただし、いくつか注意点がある。以下に挙げた項目のうち、特に最初の2つは、スクリーンリーダー向けにalt属性を最適化するときに注意が必要だ。

alt属性ですべきこと、すべきでないこと

  • 装飾画像ではalt属性を使わないこと ―― 医療保険のウェブサイトに雲の装飾画像を使っても、画像検索トラフィックを獲得する助けにはならないし、スクリーンリーダーにコンテキストを提供するのに役立つこともない。

    それでも、視覚障害のないユーザーにとっては、装飾画像は魅力的に見えるかもしれない。しかし、視覚障害のあるユーザーがページを読み進めるうえで障害にならないようにするには、空のalt属性(alt="")を使ったり、装飾画像を背景画像にしたりする必要がある。

  • テキストリンクも添えられている場合にはalt属性を使わない ―― 画像がリンクになっていて、かつ、その画像の横にアンカーテキストがあり、この両方のリンク先が同じという状況を想像してほしい。

    この場合、スクリーンリーダーが両方を読み上げるため、くどい感じや奇妙な感じをユーザーに与えることになる。画像には空のalt属性(alt="")を使用し、内容の説明はリンク先ページを示すアンカーテキストに任せよう。

    ただし、SEO担当者はこのやり方に異議を唱えるかもしれない。彼らは、画像検索の検索順位を上げるために、alt属性を画像に追加することを好むからだ。このような場合に勧めたい方法は、リンク先ページの画像でalt属性を使用することだ。なぜなら、このページこそがSERPに表示させたいものだからだ(これについては、コメント欄でさらに議論するのがふさわしいかもしれない)。

  • 常に短くするように心がけ、さもなければキャプションを使用する ―― 「JAWS」というスクリーンリーダーは125文字を超えるalt属性にうまく対応できないという話がウェブに出回っている。この話が真実かどうかはともかく、alt属性は短い方がユーザーにとって使いやすい。

    その理由を知りたい方は、ブラウザの機能拡張として使えるスクリーンリーダー(ChromeのChromeVoxFirefoxのFangs)を追加して、alt属性が長い画像のあるページを表示してみるといい。

    画像について説明したいことが多くある場合は、alt属性ではなく、キャプションやページ上の文章で説明してほしい。

  • キーワードを詰め込むのではなく、自然な文章を書くこと ―― ここも雲の装飾画像を使った医療保険のウェブサイトの例で考えてみよう。

    SEO担当者は、ランディングページに5つの雲の装飾画像があるのを見ると、「医療保険」「医療保険製品」「健康グッズ」といったキーワードをalt属性に追加できる場所が5つあると考えるかもしれない。

    だが、そんなことをしてはいけない。スクリーンリーダーのユーザーにとって邪魔なだけにとどまらず、混乱させたり苛立たせたりしかねない。

    さらに、現実的に考えれば、「医療保険」というキーワードで画像を検索する人はいない。万が一いたとしても、その人が検索結果の雲の画像をクリックして目的の情報を得られる可能性は非常に少ない。

    同様に、alt属性は必ず説明的で意味のある内容にしよう。ユーザーために記述し、ボットのために山のようなキーワードを詰め込まないように。

画像キャプション

グーグルは、画像の近くにあるテキストを他のテキストと区別し、そのテキストを画像に関連付けることができる。そればかりか、独自のキャプションさえも作れる。

そのためのコンテキストをグーグルが把握するのに、画像の近くにあるテキストが役に立つし、そうしたテキストは、検索順位にも影響を及ぼすとみられる。

もちろん、画像のキャプションはスクリーンリーダーにもコンテキストを提供する。しかも多くの場合、alt属性よりも多くのコンテキストを含めることが可能だ。

さらに、アップロードされた時点で画像のalt属性が不明な場合は、その代わりにもなる。

画像キャプションですべきこと、すべきでないこと

  • 画像キャプションがある場合は、alt属性を使用しないこと ―― リンクのアンカーテキストと同じく、alt属性とキャプションの両方に画像の説明を追加すると、くどくなりかねない。

    SEO担当者は両方を使いたがる傾向があるため、これも議論の余地が出てくるかもしれない。その場合は、その両方がスクリーンリーダーによってどのように読み上げられるかを検討し、どちらにとっても最適な選択をするようにしよう。

  • キャプションを付けた対象を説明するものであること ―― たとえば、「図1:」と書けば、図表番号を認識できない支援技術を使っている人たちでも、この図表番号を正しく理解できる。

  • やったらいいかもしれないこと: figcaption要素を使用する ―― figcaption要素をfigure要素の子要素として使用することで、画像や他のページ要素に対するキャプションや説明の役割をもたせられる。

    figcaptionはSEOにおける最適化で一般的になっている要素というわけではないし、スクリーンリーダーにとって必須の要素でもない。だが、この要素を認識しているかどうかは別として、グーグルは要素内にあるテキストのインデックス化を試みているようだ。

    figcaption要素に対する可読性はスクリーンリーダーによってばらつきがあるが、この要素内のテキストをスクリーンリーダーが画像に関連する要素と認識してくれるかもしれないのだから、うまくすれば有効に働く可能性はある。

テキストを表すのに画像を使う

テキストを表すのに画像を使うことは、SEOの観点でもアクセシビリティの観点でも、ほぼ同じ理由で避けるべきだ。テキストを機械に読み上げてもらいたいなら、画像にテキストを含めることはやめよう。

また、テキストを画像にすると、拡大して見なければならないユーザーにとっても不都合が生ずる。画像になっているテキストを拡大すると、ピクセルが粗くなって読みにくくなるからだ。

画像にテキストを含める場合にすべきこと、すべきでないこと

  • 重要な情報を述べるテキストを画像にしてはいけない ―― テキストを画像にする必要がある場合は、必ずalt属性を使用して、検索ボットやスクリーンリーダーに読み上げてもらう必要のある内容を追加しよう。

  • テキストを画像にするのではなく、テキストそのものにスタイルを適用することを検討すること ―― テキストを一定のデザインにしたい場合は、HTMLとCSSを使ってテキストにスタイルを適用するか、SVG(スケーラブル・ベクター・グラフィックス)を使用する。

この記事は、前後編の2回に分けてお届けする。後編となる次回は、「インフォグラフィック」と「動画の書き起こし、字幕、キャプション」の最適化について紹介する。→後編を読む

この記事が役に立ったらシェア!
tweet35はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

アクセス権
ファイル、ディレクトリ、Webページ、プログラムなどに対して、読み出し/書き込み ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]