解説/ノウハウ383520この記事の内容はすべて筆者自身の見解であり(ありそうもないことだが、筆者が催眠状態にある場合を除く)、Mozの見解を反映しているとは限らない。[2]」(Web担掲載記事)を取り上げた。シリーズの最後となるこの記事では、画像や動画といった非テキスト要素(メディア要素)のコーディングにおける、アクセシビリティとSEOの共通点について話をしたい。画像と非テキスト要素オンラインの画像は、視覚に障害がある人たちには判読できないという問題が起こることがあるのは、ご想像のとおりだ。幸いにも、この問題に利用できるテクノロジーがある。画像や非テキスト要素に適切なコーディングを施すことで、問題の解決を支援できるのだ。画像と非テキスト要素には、たとえば次のようなものがある。[3]イメージマップアニメーショングラフィカルボタンCaptchaここでは、画像と非テキスト要素の最適化によってアクセシビリティを高める方法をいくつか紹介しよう。alt属性SEOでは、画像の内容を検索ボットに説明するために画像のalt属性を使う。alt属性は、画像がリンクになっている場合に、画像のリンク先の内容を説明するためにも使われる。リンクでは、alt属性がキーワードを含んだアンカーテキストのような働きをし、グーグルがリンク先ページの内容を理解する手助けとなる。画像のalt属性は、スクリーンリーダーにも読み上げられる。スクリーンリーダーを使ったことがある人は多くないだろうから、どんな風に読み上げているのかを動画で簡単に示した例を紹介しておく(音声をオンにして視てほしい)。alt属性は、アクセシビリティにもSEOにも、最適化のメリットをもたらす。いくつか注意点がある。以下に挙げた項目のうち、特に最初の2つは、スクリーンリーダー向けにalt属性を最適化するときに注意が必要だ。[4]を使っても、画像検索トラフィックを獲得する助けにはならないし、スクリーンリーダーにコンテキストを提供するのに役立つこともない。それでも、視覚障害のないユーザーにとっては、装飾画像は魅力的に見えるかもしれない。視覚障害のあるユーザーがページを読み進めるうえで障害にならないようにするには、空のalt属性(alt="")を使ったり、装飾画像を背景画像にしたりする必要がある。画像がリンクになっていて、かつ、その画像の横にアンカーテキストがあり、この両方のリンク先が同じという状況を想像してほしい。この場合、スクリーンリーダーが両方を読み上げるため、くどい感じや奇妙な感じをユーザーに与えることになる。画像には空のalt属性(alt="")を使用し、内容の説明はリンク先ページを示すアンカーテキストに任せよう。SEO担当者はこのやり方に異議を唱えるかもしれない。彼らは、画像検索の検索順位を上げるために、alt属性を画像に追加することを好むからだ。このような場合に勧めたい方法は、リンク先ページの画像でalt属性を使用することだ。このページこそがSERPに表示させたいものだからだ(これについては、コメント欄でさらに議論するのがふさわしいかもしれない)。「JAWS」というスクリーンリーダーは125文字を超えるalt属性にうまく対応できないという話がウェブに出回っている。この話が真実かどうかはともかく、alt属性は短い方がユーザーにとって使いやすい。[6])を追加して、alt属性が長い画像のあるページを表示してみるといい。画像について説明したいことが多くある場合は、alt属性ではなく、キャプションやページ上の文章で説明してほしい。ここも雲の装飾画像を使った医療保険のウェブサイトの例で考えてみよう。グッズ」といったキーワードをalt属性に追加できる場所が5つあると考えるかもしれない。そんなことをしてはいけない。スクリーンリーダーのユーザーにとって邪魔なだけにとどまらず、混乱させたり苛立たせたりしかねない。現実的に考えれば、「医療保険」というキーワードで画像を検索する人はいない。万が一いたとしても、その人が検索結果の雲の画像をクリックして目的の情報を得られる可能性は非常に少ない。同様に、alt属性は必ず説明的で意味のある内容にしよう。ユーザーために記述し、ボットのために山のようなキーワードを詰め込まないように。[7]し、そのテキストを画像に関連付けることができる。そのためのコンテキストをグーグルが把握するのに、画像の近くにあるテキストが役に立つし、そうしたテキストは、検索順位にも影響を及ぼすとみられる。画像のキャプションはスクリーンリーダーにもコンテキストを提供する。多くの場合、alt属性よりも多くのコンテキストを含めることが可能だ。アップロードされた時点で画像のalt属性が不明な場合は、その代わりにもなる。リンクのアンカーテキストと同じく、alt属性とキャプションの両方に画像の説明を追加すると、くどくなりかねない。SEO担当者は両方を使いたがる傾向があるため、これも議論の余地が出てくるかもしれない。その場合は、その両方がスクリーンリーダーによってどのように読み上げられるかを検討し、どちらにとっても最適な選択をするようにしよう。「図1:」と書けば、図表番号を認識できない支援技術を使っている人たちでも、この図表番号を正しく理解できる。[10]の子要素として使用することで、画像や他のページ要素に対するキャプションや説明の役割をもたせられる。figcaptionはSEOにおける最適化で一般的になっている要素というわけではないし、スクリーンリーダーにとって必須の要素でもない。[12]が、この要素内のテキストをスクリーンリーダーが画像に関連する要素と認識してくれるかもしれないのだから、うまくすれば有効に働く可能性はある。テキストを表すのに画像を使うテキストを表すのに画像を使うことは、SEOの観点でもアクセシビリティの観点でも、ほぼ同じ理由で避けるべきだ。テキストを機械に読み上げてもらいたいなら、画像にテキストを含めることはやめよう。テキストを画像にすると、拡大して見なければならないユーザーにとっても不都合が生ずる。画像になっているテキストを拡大すると、ピクセルが粗くなって読みにくくなるからだ。テキストを画像にする必要がある場合は、必ずalt属性を使用して、検索ボットやスクリーンリーダーに読み上げてもらう必要のある内容を追加しよう。[13](スケーラブル・ベクター・グラフィックス)を使用する。この記事は、前後編の2回に分けてお届けする。後編となる次回は、「インフォグラフィック」と「動画の書き起こし、字幕、キャプション」の最適化について紹介する。http://b.hatena.ne.jp/entry/https%3A%2F%2Fwebtan.impress.co.jp%2Fe%2F2016%2F10%2F17%2F24060。