ブログ内検索

by Futomi Hatano

alt属性の使い方が厳密に規定されたHTML5のimg要素

HTML5 では、新要素が追加されただけではなく、HTML4 からある既存の要素についても、再定義しているのが特徴です。その中でも、img 要素は、他の要素に比べても、すごい力の入れようで、定義されています。

特筆すべき点として、alt 属性が挙げられます。

HTML4 の img 要素の仕様では、alt 属性は、イメージをレンダリングできないブラウザーの場合に表示する代替テキストとして使われ、イメージの簡単な説明を入れる、という程度にしか、定義されていませんでした。そして、もし詳細な説明を入れたい場合は、オプションで、longdesc 属性を使うこととなっていました。これまでは、アクセシビリティの観点から、alt 属性の使い方についてガイドラインや、業界のコンセンサスはありましたが、HTML 準拠要件という形では存在していませんでした。

ところが、現時点での HTML5 の img 要素の仕様では、longdesc 属性は廃止され、alt 属性がその役割も果たすことになっています。特に、alt 属性の使い方については、img 要素仕様の半分以上を占めています。中にはブラウザーベンダー向けの記述もありますが、ほとんどはウェブ制作者に関係するものばかりです。

簡単にまとめると、イメージのタイトルを alt 属性に入れるのではなく、そのイメージが表すものを言葉で説明した文章を入れなさい、ということです。画像が使われる状況にもよりますが、もし画像が表示されず、文章だけが表示されたとした場合、前後の文章と、そのイメージの alt 属性の文章が、シームレスにつながることが肝要とのことです。

ただ、これは、あくまでも、画像が文脈の一部として使われた場合の話です。しかし、HTML5 の img 要素の仕様では、あらゆる利用シーンを想定して、それぞれのシーンに応じた alt 属性の使い方が規定されています。

これが「規定」だということが、驚きます。ガイドラインではありません。HTML5 の準拠ドキュメントを制作する際には、ちょっと骨が折れるかもしれませんね。

詳しくは、HTML5 仕様の img 要素の日本語訳をご覧ください。HTML5 でマークアップしなくても、アクセシビリティ、しいては、SEO としても、非常に参考になる内容です。

この投稿は 2009年7月30日 木曜日 11:58 AM に マークアップ カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。