Movable TypeやWordpressなどのCMS、Movable Type.netやJimdoなどのウェブサービス型CMS、アメーバブログ（アメブロ）などのブログASP、どのアプリケーションやサービスを使用しても画像（写真）を挿入することができます。しかし、単純に画像を挿入しただけでは実は問題があるのです。
どのような問題か...それは「画像が見えない場合は、そこにどのようなコンテンツがあるか理解できない」ということです。画像が見えない状況がなかなか想像しにくいかもしれませんが、次のような状況があります。
- 検索エンジン（Googleなど）のロボットがページをクロール（閲覧）した場合
- 何らかの理由で画像が表示されなかった場合（例えばスマートフォンを利用していて、電波の状況が悪く、画像がダウンロードされなかった）
- 視覚に障害をお持ちの方が音声読み上げソフト（スクリーンリーダー）でページを閲覧した場合
- 音声だけで操作する未来の端末を利用した場合
ではどのようにすれば良いか...それは「画像に代替テキストを付与すること」です。代替テキストを付与することで、画像が見えない場合でもそこにあるコンテンツを理解できるようになる、つまりマシンリーダブル...機械がテキストデータを読み取って何らかの処理ができる状態になります。
個人ブログで恐縮ですが、先日「R2-D2™ ANA JETに搭乗」という記事を執筆しました。そこには9枚の写真を挿入したのですが、それぞれ代替テキストを付与して写真の内容をテキストでも表現しています。例えば機内の座席前に装備されていた画面の写真を入れた部分は、次のように代替テキストを指定しています。（ツールを利用して、普段画面に表示されない代替テキストを表示させています。）
今回は「座席正面に装備された17インチワイド画面の写真。地図と飛行機の姿勢などが表示されています。
」と代替テキストを指定しています。
代替テキストの指定は、Webアクセシビリティにおいて非常に重要な項目です。また、Googleが提供している「検索エンジン最適化スターターガイド」にも取り上げられている内容です。ぜひお使いのアプリケーションやサービスでどのようにすれば代替テキストが指定できるか、確認してみてください。いくつか画面を操作したのですが、画像をアップロードした際にボタンをクリックして代替テキストを指定するパターンが多いようです。
来週17日には「Web担当者Forum」の「デザイニングWebアクセシビリティコーナー」に「画像を含むコンテンツが理解できないサイトを改善する4つの解決アプローチ」が掲載される予定のようですので、記事をご覧になられると今回ご紹介した内容がより具体的にお分かり頂けるのではと思います。
今回は主にWebサイトを更新する際を想定して代替テキストのお話をしましたが、Webサイト（一般的にはホームページと呼ばれる）を新たに構築する際にも非常に重要なポイントとなるものです。当社では、コーディング時に適切な代替テキストを付与するようにすること、装飾画像ではないのにCSSで背景画像として扱うことがないようにすること、に注意しています。