前回の記事ではWebページに画像を配置するIMG要素にはalt属性の記述が必須であることを、HTMLの仕様書の内容を交えつつ解説した。また、適切な代替テキストが記述されないという事態が起こる主な理由についても考えてみた。今回は実装が完了した後の検証、確認方法について、検討してみたい。

代替テキストのチェックは専門家だけの仕事ではない

「代替テキストの妥当性を検証する」などといってしまうと、非常に専門性の高いタスクのように感じられるかもしれない。しかし、その文書・コンテンツを理解できるのであれば、（主に）画像の代わりに入るテキストが、妥当であるかどうかを検証することは可能なはずである。もっと言えばそのWebサイトの制作関係者であれば、誰でも可能なことだと言ってよい。

また代替テキストもコンテンツの一部であるという前提の下では、関係者といっても実装・マークアップの担当者や原稿作成者など、実際に制作に関わる人だけではなく、例えば企業の広報担当者のような、必ずしも(X)HTMLの知識があるとは限らない人も、制作者が正しいコンテンツを作ったかどうかは積極的に検証するべきである。

検証方法

とはいえ、問題はその検証方法だ。代替テキストの検証といっても、非常に多くの方法が考えられるわけだが、今回は比較的簡単に実行できそうな以下の3つの方法について、その利点、欠点を確認しておくことにしよう。

  • Internet Explorerのツールチップを利用する
  • 「インターネット オプション」の設定を変える
  • ブラウザの拡張ツールを利用する
Internet Explorerのツールチップ【図1】を利用する

まず、ひとつめの方法は非常にお手軽で、ほとんどの人がすぐに試すことができる。表示した画像の上にカーソルを載せて代替テキストを表示し、確認する方法だ。ただし、この方法を利用するにあたっては、Internet Explorerにおけるレンダリングに問題があるという点と、前回取り上げたようにツールチップを表示する目的でalt属性を使うべきでない、という２点をしっかり理解しておきたい。


【図1】

ちなみに、alt属性値をツールチップとしてレンダリングしてしまうInternet Explorerのレンダリングに関する問題点については、HTMLの仕様書13.2 Including an image: the IMG elementの次の記述内容が根拠になる。

The alt attribute specifies alternate text that is rendered when the image cannot be displayed (see below for information on how to specify alternate text ). User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.

「alt属性は、画像が表示できない時にレンダリングされる代替のテキストを指定する」とされているわけで、画像が表示されているにもかかわらずalt属性が表示されるような、ツールチップとしての流用を促進する現在の状況は不適切といえる。

少し話が逸れてしまったが、この方法には上記の問題に加え、また画像をひとつひとつチェックする必要性があること、alt属性がうっかり与えられていないものと、意図的に「空」にした部分との区別が付かないことなど、さまざまな問題点がある。したがって、簡単に確認したい場合以外は他の方法をおすすめしたい。

「インターネット オプション」の設定を変える

次に、Internet Explorerで画像の表示を無効にした環境での検証方法について考えてみよう。これも上記ほどではないが、比較的簡単な方法である。やり方としては、Internet Explorerの「ツール」メニューから、「インターネット オプション」を選び、「詳細設定」タブの中、マルチメディアの「画像を表示する」のチェックボックスを外す【図2】。あとはページを更新すれば、画像が表示されなくなるはずだ。この設定は、ナローバンドのユーザーには用いられることも少なくなく、このような状況で理解できるようになっていることは重要なことである。



【図2】

この方法における問題点は、画像のサイズが小さかったり、代替テキストの文字数が多い場合にすべてを表示しきれない場合があるということだ【図3】。しかしながら、前述のとおり実際にユーザーがアクセスしている可能性のある環境のひとつであり、その意味では有効な方法といえる。


【図3】

ブラウザの拡張ツールを利用する

最後に紹介するのは、ブラウザに付属している機能ではなく、拡張機能などと呼ばれるもののひとつであるツールバーを利用する方法だ。この方法は普段いブラウザにろいろな機能は追加しない、という人には少し難しく感じられるかもしれないが、Webアクセシビリティだけではなく、さまざまな便利ツールがあるので、このような手段も積極的に検討してほしい。
さて、それらの中で今回筆者がおすすめするのは、Chris Pederick 氏が制作しているWeb Developer Extensionの日本語版、「Web Developer 1.0.2 日本語版」（株式会社インフォアクシアによ る提供）である。
これは基本的にWeb制作者向けのツールではあるが、代替テキストのコンテンツ内における妥当性の検証が簡単にできるという点をはじめとして、制作者以外でもいろいろと利用価値のあるツールだ。
代替テキストの確認だけであれば使い方は非常に簡単で、「画像」メニューから、「alt属性値を表示する」を選択するだけで完了だ【図4】。また、前述の2つの方法に比べて優れている点として、複数の画像の代替テキストを元の画像とともに表示できる点が挙げられる【図5】。



【図4】



【図5】

以上のように、今回は代替テキストがコンテンツに対して妥当であるかどうかの検証方法をご紹介してきた。属性の有無などは機械的に検証できるものの、テキスト内容の妥当性については、まだまだ人間がチェックする必要がある。人がチェックする以上は、やはり間違いがつきものであるが、できるだけ多くの人間がチェックすることでミスも少なくなる。今回紹介させていただいたように、検証自体はそれほど難しいことではないので、関わりのあるサイトをチェックしてみてはいかがだろうか。