アクセシビリティと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のChromeVoxやFirefoxの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回に分けてお届けする。後編となる次回は、「インフォグラフィック」と「動画の書き起こし、字幕、キャプション」の最適化について紹介する。→後編を読む