HTML5: img 要素の alt 属性 の仕様

• 2011年7月11日
• Web
• まとめ, 覚え書き

• 概要
• alt 属性に指定する代替テキスト
• 空文字列の代替テキスト
• alt 属性の省略
• 関連リンク
• 訂正：HTML4/XHTML の alt 属性について

概要

HTML5 では img 要素の alt 属性の仕様が大幅に変更され、HTML4/XHTML と比較すると定義がかなり詳細化されている。

HTML5 における alt 属性 の仕様を概略すると次のようになる。

• alt 属性には画像を置換可能な詳細な代替テキストを指定する
  • HTML4/XHTML の alt 属性は短い説明 (alt テキスト) だったが HTML5 の alt 属性は長い説明 (title 属性よりは longdesc 属性に近い (※))
  • 画像の情報量 ≒ alt 属性に指定する代替テキストの情報量
• 特定の条件を満たせば alt 属性を省略することができる

※ HTML5 の仕様はワーキングドラフトでまだ勧告されてはいないが、既にラストコール (最終草案) のため alt 属性の仕様が変更されることはないと思われる。

alt 属性に指定する代替テキスト

HTML4/XHTML の alt 属性は画像に関する短い説明 (キャプション、タイトル、簡単な説明など) を表し、役割としては title 属性とはあまり区別されずに使われていることが多い (※)。しかし HTML5 では画像を alt 属性で置き換えても前後の意味が変わらない代替テキストを指定する必要があり、役割としては longdesc 属性に近いものになっている。

※ alt 属性に詳細な (画像と同等の) 代替テキストを指定することは仕様であってガイドラインではないことに注意。

空文字列の代替テキスト

次のような場合は空文字列の alt 属性 (alt="") を指定する必要がある。(MUST)

• 画像と同等のテキストの隣にあるアイコンやロゴ
• 前後のテキストを補足しているだけで削除しても問題のない画像
• 情報として意味のない (情報量のない) 装飾的な画像
• 複数の画像をつなぎ合わせた場合の最初以外の画像 (最初の画像は代替テキストを指定する)
• 表示目的でない画像 (アクセスカウント用の width=0, height=0 の画像など)

alt 属性の省略

次のような場合は alt 属性を省略することができる。(MAY)

• 画像内容が不明な場合 (自動取得/生成やユーザー投稿など) で、かつ次のいずれかの条件を満たす場合
  • img 要素に空文字列でない title 属性がある
  • 空白でない legend figcaption 要素を含む figure 要素内に img 要素がある
  • img 要素が見出し (セクション) 内の唯一の内容となっている
• 画像が閲覧不可な環境 (低速回線やテキスト/音声ブラウザーなど) で、かつ利用可能な代替テキストがない場合
• 画像が閲覧可能な人に向けたプライベートな文書や HTML メール
  • ただし代替テキストを指定することが強く推奨される

※ 単純 (無条件) に alt 属性を省略できる訳ではないのでHTML5 では alt 属性は必須ではなく省略可能という説明は適切でない。また HTML5 の仕様に従うと alt 属性の記述は非常に大変になるが、それを alt 属性省略の理由とすることは許されていない。

関連リンク

• alt属性の使い方が厳密に規定されたHTML5のimg要素 ≪ HTML5.JP ブログ
• 4.8.1.1 Requirements for providing text to act as an alternative for images – HTML5
  • 日本語訳：イメージの代替として作用するテキストを提供するための要件 – HTML5.JP
• HTML5: Techniques for providing useful text alternatives
• WHATWG – 『Why the Alt Attribute May Be Omitted（Alt属性をなぜ省略しても良いのか）』 日本語訳 – HTML5.JP
• HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。 – CSS HappyLife
• まだWorking Draftですが、それにしても、HTML5のimg要素のalt属性がえらいことこになっている件 | SEO VSTW
• clmemo@aka: HTML5 の img 要素に alt 属性は必須ではない

訂正：HTML4/XHTML の alt 属性について

HTML4/XHTML の alt 属性は title 属性に近かったが HTML5 の alt 属性は longdesc 属性に近い

HTML4/XHTML の alt 属性は画像の補足的な情報 (キャプション、タイトル、簡単な説明など) を表し、役割としては title 属性とあまり変わらない仕様となっていた。

仕様に関する記述としては適切でなかったため、訂正して補足しておきます。(alt 属性と title 属性の仕様が同じ/似ているという意味ではなく、現状では使われ方が似ている/区別されていないという意味合いでした。)

HTML4/XHTML の仕様では alt 属性には代替テキストを指定するが、次のような点から HTML4/XHTML の alt 属性と title 属性が明確に使い分けされていることは少なく、現状では title 属性に近い使われ方になっていることが多い。

• HTML 4.01 の alt 属性の DTD コメントに short description と書かれている
• Web コンテンツ アクセシビリティ ガイドラインを参照すると (SHOULD)、alt 属性には短い代替テキスト (alt テキスト) を指定するよう記述されている
• モダンブラウザーでは title 属性がツールチップ表示されるが、レガシーブラウザーでは alt 属性がツールチップ表示されていた

※ 参考：alt 属性関連のリンク

• HTML 4.01 Specification – 13.8 How to specify alternate text
  • 日本語訳：HTML 4.01仕様書 – 13.8 代替テキストの指定方法
• Web Content Accessibility Guidelines 1.0 – Guideline 1. Provide equivalent alternatives to auditory and visual content.
  • 日本語訳1：Webコンテンツ・アクセシビリティに関する指針1.0 – 指針1. 聴覚的および視覚的コンテンツに等価代替物を提供する
  • 日本語訳2：ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0 – ガイドライン1.　聞くための内容や見るための内容には、同等の役割を果たす代わりのものを提供する
• HTML Techniques for Web Content Accessibility Guidelines 1.0 – 7.1 Short text equivalents for images ("alt-text")
  • 日本語訳：ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 HTML技術書 – 7.1 画像に対する短い同等の役割を果たすテキスト("alt-テキスト")
• imgタグにおけるaltの使い方について – ごく簡単なHTMLの説明
• img要素でalt属性の内容がポップアップしない – Web標準普及プロジェクト
• altはつけるだけじゃなくて – 実践アクセシブルHTML 第一回