去る2011年6月18日、HTML5-WEST.jpの村岡正和氏が主催されている「第7回HTML5読書会」に参加してきました。第1回に参加してから実に6回ぶり。羽田野太巳氏の「徹底解説HTML5」を読み進める会です。色々と興味深い内容がありましたが、figure要素からの話の流れで、altコンテンツ属性（以下alt属性）について重要な議論がありました。今後のマークアップの考え方にも重要な意味があると思い、読書会と本の内容を踏まえつつ、独自に復習してみました。
※alt属性を指定すると、画像がリンク切れなどで表示されない場合は代替テキストが表示されます。また、スクリーンリーダーはaltタグの文章を読み上げます。
以下のような画面のコーディングを考えてみましょう。

これまでのコーディング

alt属性はHTML4では、画像の代替テキストとして使用されます。なので「ラベンダー畑の画像」などの文章を入れていました。

altに与えられた新しい役割

HTML4ではイメージを簡単に説明する代替テキストで良かったので、上記のような表記で良かったのですが、HTML5からは「フォールバック」という役割が与えられることになります。

もしイメージが表示されなかったとしても、ドキュメントの意味を損なわず、イメージの代役を果たすことが求められるのです。

イメージの代役を果たすというのは、イメージの前後の文章と、altコンテンツ属性のテキストをつなげて読み上げたときに、違和感なくユーザーに伝わることなのです。

引用元：「徹底解説HTML5」羽田野太巳著

「徹底解説HTML5」の中では、電話越しにイメージを説明することを想定して考えると良いとあります。
なるほど。なるほど。

これまでもalt属性はアクセシビリティのために使用されていましたが、さらに厳密にアクセシビリティに配慮して使用していく必要性が出てきたということですね。

では今回のケースでは具体的にどのように設定すべきか考えてみましょう。

イメージのタイトルをalt属性に入れない

alt属性に「爽やかな青空の下で一面に広がる鮮やかな紫色のラベンダー畑」と入れてみました。

一見、画像の情報は伝わりますし、良さそうなのですが、画像を詳しく説明していたとしても、alt属性に画像のタイトルとなるような文字を入れてはいけないようです。

このような書き方の場合は、イメージのタイトルとしての情報になりますので、alt属性ではなく、title属性で指定する形が正しいようです。

フォールバック的な設定

画像をテキストに代えて読んでも、スクリーンリーダーで順番に読み上げられても、イメージが表示されているのと同じ内容が違和感なく伝わらなければいけません。

なので、alt属性に「爽やかな青空の下で鮮やかな紫色のラベンダーが一面に広がっています。」と指定しました。

これであれば、全てテキストで表示された際も、
「この季節、北海道ではラベンダーが見どころの一つです。爽やかな青空の下で鮮やかな紫色のラベンダーが一面に広がっています。壮大な景観に感動」
と内容に繋がりを持たせつつ、情報を伝えることができているのではないでしょうか。

上記は使い方のほんの一例で、HTML5ではalt属性の使い方がかなり細かく規定されているようです。title属性とalt属性の使い分けや考え方は、実務の中でも今から慣れていく必要がありますね。次回以降の読書会でalt属性が記述されている個所がでてくるので、それまでに事前に勉強しておこうと思います。

京都GTUG（http://www.kyoto-gtug.org/home/）
HTML5-WEST.jp（http://www.html5-west.jp/）