前回予告したとおり「Webアクセシビリティといえば」ということで、今回は「代替テキスト」などと呼ばれることの多い『alt属性値』についての基本を簡単に確認した上で、普段はあまり取り上げられない、マークアップ担当者『以外』が注意するべきポイントについて取り上げてみたい。
alt属性とは
画像等の代替テキストについては、Webアクセシビリティに関連するガイドラインでは必ず最重要項目のひとつとなっていることもあり、さまざまなところで解説がなされている。その為、既に周知の事実も多いかもしれないが、まずは基本的な部分について再確認するところから始めよう。
そもそもalt属性とはどのように定義されているのか、HTML 4.01 仕様書を参照すると、13.8 How to specify alternate textにおいて、以下のような記述がある。
上記をtext、CSについてのリンク先を参照した上で、筆者なりに解釈すると、「alt属性値は人間が読みやすいテキストで書かれ、大文字と小文字は区別される（CSはCase Sensitiveの略）。画像、フォーム、アプレットを表示できないユーザー・エージェントの為に、この属性は代替となるテキストを指定するもので、その言語はlang属性によって指定される。」ということになる。
そのほか、IMG要素とAREA要素についてはalt属性が必須であること、装飾的な画像はalt属性値を空にすること、「ダミーテキスト」のような無意味な値を指定しないこと、などについて言及されている。
適切なalt属性値を記述する為に
どのような内容が適切なのか、ということについては、前述のとおり既に解説している記事なども多く、また簡単に説明できるものではないので今回は触れないこととして、どうすればalt属性が忘れずに記述され、かつその内容が意味のあるものになっていくのか、この部分を前回、前々回で取り上げたワークフローと関連付けて考えることにしたい。なお、これ以降は画像の代替テキスト、つまりIMG要素におけるalt属性についての記述であることをあらかじめお断りしておきたい。
alt属性にまつわる問題点としては、次のようなものが考えられる。
- alt属性がない
- alt属性値に原稿作成者の意思が反映されていない
- alt属性に関して、間違った認識を持っている
最大の問題点は、実装段階において、(X)HTMLのマークアップを行う制作者がalt属性を知らない、すなわち正しい(X)HTMLについての知識が欠けている為に、alt属性がないIMG要素を含む(X)HTMLが生成されてしまうということであろう。この点については、制作者が学習する必要があるのはもちろんのこと、正しくないソースコードを生成できてしまう、いわゆるホームページ作成ソフトやCMSなどのWebオーサリング・ツール、問題があっても特に警告を発することのないWebブラウザをはじめとしたユーザー・エージェント、これらの開発者も改善を考えていく必要があるのではないだろうか。
次に、そのひとつ前の段階、つまりマークアップ担当者に渡される原稿、ここに問題がある場合が考えられる。これはワークフローにおいては、実装段階ともいえるかもしれないが、そうではなく、設計時点での問題だと考えてほしい。多くの場合において、画像を含む原稿を作成する時点では、代替テキストの存在については考慮されていない。このこと自体、設計ミスであるとはいえないだろうか。なお、これには主に2つのケースが考えらる。ひとつはそもそもマークアップ担当者に渡った原稿が何かの媒体の使い回しであって、Web用の原稿ではないという場合。もうひとつはWeb用ではあるものの、画像が表示可能なWebブラウザのことしか考えられていない場合、である。
いずれの場合においても、最終的にマークアップ担当者に原稿が渡される段階においては、alt属性値が空の場合も含めて正しく指定されているべきであり、画像上の文字をただ単にalt属性値として指定するとか、画像が文字を含まないからといって、意味がある画像のalt属性値を空にしてしまう、といったことがないようにしなくてはならない。
最後に、上記同様に設計段階での問題、もしくはその前の要件定義の段階での問題ともいえる例を挙げる【リスト1】。alt属性をツールチップに使ってしまう場合と、SEO（検索エンジン最適化）の為に使ってしまう場合である。これはどちらにしても、明らかに間違った認識を持っている、もしくは理解した上で正しくない使い方をしていると考えられるが、このような方法が適切ではない、ということをWebサイト制作に関わる人間がしっかりと認識しておく必要があるだろう。ちなみに、alt属性値はFirefoxやOperaなどではツールチップとしては表示されないので、前者について誤った認識がある場合には、一度確認してみてはいかがだろうか。
以上のように、単純に代替テキストの問題といっても、さまざまな部分で気をつける必要がある。とはいえ、すべては仕様を正しく理解していないことに起因している。もちろん、サイト制作関係者全員が仕様を完全に理解する、というのはあまり現実的ではないだろう。しかし、要所要所においては正しい理解をもった人がいるべきであり、それを要件として落とし込んでいく必要があるといえる。
また、そもそもの話として、代替テキストをはじめとした代替情報までを含めてWebコンテンツである、との認識を浸透させていくこと、これが最も大事なのではないか、と筆者は考えている。
【リスト1】要件定義に問題があると考えられるalt属性の例
- ツールチップに使ってしまった記述例
- 「好評発売中！」
（画像と一緒でなければ意味をなさない）
- SEO対策に使ってしまった際の記述
- 「ビジネスの現場で使えるデザイン総合情報誌：NIKKEI DESIGN」
（元画像にはない情報までが、キーワードの為に詰め込まれている）
- 妥当な記述
- 「日経デザイン12月号：表紙」
※ただし、キャプションがあるなら、二重表示や読み上げを防ぐ為に「空（alt=""）」がふさわしい場合もある
