* img 要素・area 要素・input 要素・applet 要素 alt 属性 (HTML, XHTML 1)

[1] [[HTML]] の [CODE(HTMLe)[[[img]]]] 要素、[CODE(HTMLe)[[[area]]]]
要素、[CODE(HTMLe)[[[input]]]] 要素、 [CODE(HTMLe)[[[applet]]]] 要素の
[DFN[[CODE(HTMLa)[alt]] 属性]]は、
[[画像]]、[[画像写像]]の領域、[[form control]], [[applet]] 
を表示できない時にレンダリングする[DFN[[RUBYB[[[代替文]]] [alternate text]]]]を指定します。

[5] 仕様書:
- [[HTML 4]]
-- 13.2 Including an image: the IMG element
<IW:HTML4:"struct/objects.html#edef-IMG">
-- 13.6.1 Client-side image maps: the [CODE(HTMLe)[MAP]] and 
[CODE(HTMLe)[AREA]] elements
<IW:HTML4:"struct/objects.html#idx-accessibility-3">
-- 13.8 How to specify alternate text
<IW:HTML4:"struct/objects.html#alternate-text">

[[#comment]]


** 属性値

[7] [CODE(HTMLe)[img]] 要素・[CODE(HTMLe)[area]]
要素では、この属性は'''必須'''です。 [CODE(HTMLe)[input]] 要素と
[CODE(HTMLe)[applet]] 要素では省略可能です。

[CODE(HTMLe)[applet]] で省略可能なのは、 [CODE(HTMLe)[[[object]]]]
要素と同じように[[内容]]として代替文を記述できるからでしょう。

[25]
[[DTD]] [[注釈]]にちょこっと書いてありますが、
[CODE(HTMLe)@en[[[applet]]]] [CODE(HTMLa)@en[[[alt]]]] が[[必須]]になっています。

;; <IW:XHTML1m12n:"abstract_modules.html#s_appletmodule">、
<IW:XHTML1m12n:"dtd_module_defs.html#dtdelement_applet.qname">

([[名無しさん]])

[[#comment]]


*** 値の中での改行

[3] [[不思議マーク付け]]の世界では、
このツールチップ表示文字列を改行する裏技(?)があります。
改行したい場所で [CODE(HTML)[&#13;&#10;]] を挿入します。
[PRE[
 <img alt="foo&#13;&#10;bar">
ところで、これは普通単にソースの属性値指定中でごくふつーに改行するのと同じことです。
]PRE]

[PRE[
 <img alt="foo
 bar">
]PRE]

確かにこの方法で [[WinIE]] では意図したように表示されます。
しかし [[Mozilla]] では (Mozilla では [CODE(HTMLa)[alt]]
属性は tooltip では表示されませんけど、 [CODE(HTMLa)[title]]
属性の場合や、 [CODE(HTMLa)[alt]] 属性を表示できるようにする拡張を入れている場合に)
[[Win9x]] では「・」が、 [[WinNT]] 系では実行している環境の
[[CodePage]] で [CODE(char)[0x0D]], [CODE(char)[0x0A]] 
に割当てられている文字が表示されてしまいます。
(人はこれを[[文字化け]]と言います。)
([[Mac]] や [[Un*x]] ではどうなるんでしょう?)

[4] 更に、 [[Strictスレ]]の情報
(<http://pc2.2ch.net/test/read.cgi/hp/1048867117/778>)
によれば、 [[IE]] では次のような手法が使えます。

[PRE[
 <img alt="foo<br>bar">
]PRE]

これが事実ならまったくもって驚くばかりでありますが、
残念ながら手元の [[WinIE 6.0]] on [[WinXP]]
では確認できていません。 (そのまま [SAMP(HTML)[<br>]]
と表示されます。)

[[#comment]]


** 応用

[14] 一般に、代替文は次の場合に有用です。 [SUP[ [HTML 4] ]]
- 非図形的表示端末
- フォームに対応していないブラウザ
- 視覚障害者
- 音声 UA
- 画像非表示 UA

もちろん、他にも有用な場合が多々あるでしょう。

[6]  [CODE(HTMLe)[img]] 要素では、UA は、 (1) 画像を表示できない時、
(2) 扱えない種類の画像の時、 (3) 表示しないと設定されている時には
[CODE(HTMLa)[alt]] 文をレンダリングしなければなりません [SUP[ [HTML 4] ]]。

[9] [[画像写像]]では、 UA と著者は、画像が利用できないか、
利用者が access 可能でないときには文章による代替を提供するべきです。
例えば、 UA は [CODE(HTMLe)[area]] 要素の [CODE(HTMLa)[area]]
属性を使って図形的画像写像の代わりに文的リンクをレンダリングできます。

[15] 多くの図形的 UA は、
画像が鯖から到着するまでの間に一時的に代替文を画像の代わりに表示してくれます。

[19]
[CITE[img要素でalt属性の内容がポップアップしない - Web標準普及プロジェクト]] <http://www.mozilla.gr.jp/standards/webtips0024.html>

[20]
[CITE[XUL Apps > Popup ALT Attributes - outsider reflex]] <http://piro.sakura.ne.jp/xul/_popupalt.html>

[[#comment]]


*** ツールチップ表示

[2] [[WinIE]] などでは、画像の mouseover 時にこの属性の値が
popup ([[tooltip]]) で表示されます。

但し、 [CODE(HTMLa)[[[title]]]] 属性が指定されていればそちらが優先されます。

[10] [[Mozilla]] ([[Gecko]]) などは通常 [CODE(HTMLe)[alt]]
は ([CODE(HTMLa)[title]] がなくても) tooltip として表示してはくれません。
しかし、 >>11 のようにこれを濫用する人が後を立たないので、
[CODE(HTMLa)[alt]] も tooltip にする拡張が開発されています。

[[#comment]]


** 他との関係

[8] [CODE(HTMLa)[[[longdesc]]]] 属性で指定された資源は画像の長い説明で、
[CODE(HTMLa)[alt]] を更に補うものです。
[CODE(HTMLa)[alt]] は利用者が [CODE(HTMLa)[longdesc]]
によるリンクをたどるかどうかを決めるのに十分な情報を提供するべきです。
[SUP[ [HTML 4] ]]

[12] [CODE(HTMLa)[alt]] 文の言語は、 [CODE(HTMLa)[[[lang]]]]
属性によります。 [SUP[ [HTML 4] ]]

[13] この属性は [CODE(HTMLe)[input]] 要素にも使えますが、
特に [CODE(HTMLa)[[[type]]]] が [CODE(HTMLa)[[[image]]]]
の時には限定されず、一般に form control をレンダリングできないときに使えるようです。
[SUP[ [HTML 4] ]]

その割には [CODE(HTMLe)[[[textarea]]]] など他の form control
には [CODE(HTMLa)[alt]] は定義されていませんが、良いのでしょうか。
(他の form control は[[内容]]を持つからでしょうか。
そうであるとしても、 form control をレンダリングしない UA
が [[RFC 1866]] に存在しない [CODE(HTMLa)[alt]] 
属性を見てくれることは期待できないのではないでしょうか。)

[[#comment]]


** 不思議解釈

[11] >>2 のために[[タグ辞典]]などでは [Q[tooltip のためのタグ]]などとして紹介されていることがあります。

[21] '''検索円陣 spam''':
たまに、[[検索円陣spam]] に使われることがあります。
普通の画像の [CODE(HTMLe)@en[alt]] 属性に spam
目的の適当な文字列を詰め込むだけではなく、
1×1など小さな画像など、普通の[[利用者]]が気づかないような画像を用意して、
その [CODE(HTMLe)@en[alt]] 属性にあること無いことを詰め込む手口のようです。

[22]
[CITE[Re: あなたの知らないかもしれないCSS: 5. こだわりのh1 [/design/html] - 行動記録]] <http://everybody.good-day.net/~iwai/blosxom/design/html/re-css-tricks-10.htm>
([[名無しさん]] [WEAK[2005-08-25 09:14:36 +00:00]])

[[#comment]]


** メモ

[15] 著者は次の点に注意するべきです。 [SUP[ [HTML 4] ]]
:書式付けのための画像に、無関係な代替文を指定しない:
例えば見出しや段落の装飾に赤い球の画像を使ったとして、
代替文 [Q[赤い球]] は不適切です。このような場合に代替文は空文字列とするべきです。
しかし、そもそもそのような場合には[[スタイル・シート]]を使う方がより望ましいです。
:意味の無い代替文を指定しない:
[Q[ダミーの文]]のような意味の無い代替文を指定してはいけません。
閲覧者の鬱憤の元です。特に音声 UA や点字 UA では情報伝達が遅くなります。

[16] よく、 [[WYSIWYG]] 型[[著述工具]]などで画像の[[ファイル名]]や寸法
(ファイル・サイズや画像の大きさ) 
や画像形式などを代替文に自動的に入れるものがあります。
こういうことを好む著者もいるようで、
自動的ではなくわざわざ手書きであっても入れる人もいるようです。

しかし、[Q[''代替''文]]の意味を考えれば、愚かなことであります。

[17]
HTML 4 DTD 注釈は[Q[短い説明]]だと説明しています [SRC[[CODE(HTMLe)[img]], [CODE(HTMLe)[area]], [CODE(HTMLe)[applet]]]]。

[23]
[[Line Mode Browser]]は2.14 (1994年11月) で[CODE(HTMLa)@en[[[alt]]]]を[[レンダリング]]するようになりました。

;; [CITE@en[Change History of Line Mode Browser]] 
<http://www.w3.org/LineMode/User/Features.html>

([[名無しさん]] [sage])

[24]
[CITE[実践アクセシブルHTML - altはつけるだけじゃなくて]] <http://w3j.org/articles/practicalaccessiblehtml/practicalaccessiblehtml01.html>
([[名無しさん]] [WEAK[2006-07-26 12:48:42 +00:00]])

[26]
[CITE[Guidelines on ALT texts in IMG elements]] <http://www.cs.tut.fi/~jkorpela/html/alt.html>
([[名無しさん]])

[27]
[CITE@ja[装飾およびレイアウト目的の画像の代替テキスト | アクセシビリティBlog | ミツエーリンクス]] ([[ミツエーリンクス]] 著, [CODE[2007-02-09 18:38:01 +09:00]] 版) <http://accessibility.mitsue.co.jp/archives/2007/02/emptyalt.html>
([[名無しさん]] [WEAK[2007-02-16 00:22:00 +00:00]])

[28]
[CITE[音声ブラウザと相性の良いHTMLを作る(1)。 (Junnama Online (Mirror))]] ([CODE[2007-06-09 17:25:17 +09:00]] 版) <http://junnama.alfasado.net/online/2007/05/webhtml.html>
([[名無しさん]] [WEAK[2007-06-09 14:36:41 +00:00]])

[29]
[CITE[音声ブラウザと相性の良いHTMLを作る(3)。 (Junnama Online (Mirror))]] ([CODE[2007-06-09 17:25:16 +09:00]] 版) <http://junnama.alfasado.net/online/2007/05/html3.html>
([[名無しさん]])

[30]
[CITE[HTML5 IRC logs: freenode / #whatwg / 20070630]] ([CODE[2007-07-01 02:33:37 +09:00]] 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20070630#l-181>
([[名無しさん]] [WEAK[2007-06-30 17:34:55 +00:00]])

[31]
[CITE[EMail Msg <9309211647.AA00990@Xtreme>]] ([CODE[2007-07-01 04:18:27 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q3.messages/983.html>
([[名無しさん]])

[32]
[CITE[EMail Msg <9308260107.AA23088@stat1.cc.ukans.edu>]] ([CODE[2007-07-01 04:44:10 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q3.messages/774.html>
([[名無しさん]])

[33]
[CITE[A revamp of the alt="" attribute on <img> elements]] ([[Ian Hickson <ian@...>]] 著, [CODE[2007-08-15 04:00:51 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/11688>
([[名無しさん]])

[34]
[CITE@ja[altにまつわるエトセトラ | アクセシビリティBlog | ミツエーリンクス]] ([[ミツエーリンクス]] 著, [CODE[2007-07-17 12:04:13 +09:00]] 版) <http://accessibility.mitsue.co.jp/archives/2006/03/alt_1.html#mainContentsArea>
([[名無しさん]])

[35]
[CITE@ja[altにまつわるエトセトラ | アクセシビリティBlog | ミツエーリンクス]] ([[ミツエーリンクス]] 著, [CODE[2007-07-17 12:04:13 +09:00]] 版) <http://accessibility.mitsue.co.jp/archives/2006/03/alt_1.html#mainContentsArea>
([[名無しさん]])

[36]
[CITE@ja[第23回 画像の代替テキストのベタープラクティス(2):ITpro]] ([CODE[2007-08-24 13:09:54 +09:00]] 版) <http://itpro.nikkeibp.co.jp/article/COLUMN/20070515/270978/?ST=techskill>

> 実際のページ上での見え方は、次のようになる。CSSでdiv要素全体をフロートさせ、本文テキストとは視覚的に区別しやすいようにしておくとよいだろう。

として示された [CODE(HTMLe)@en[[[img]]]] の [CODE(HTMLa)@en[[[alt]]]] が

> 当社の事業ごとの売り上げ規模

これはひどい。 ([Q[当社の事業ごとの売り上げ規模]]は例に用いられた[[画像]]の[[代替文]] (としてもひどいものですが。) であり、[Q[CSSでdiv要素全体をフロートさせ、本文テキストとは視覚的に区別しやすいようにしてお]]いた上での[Q[実際のページ上での見え方]]の[[画像]]の[[代替文]]とはなりえません。)
([[名無しさん]])

[37]
[CITE@ja[alt属性はいかに決定されるべきか | Takazudo Clipping*]] ([CODE[2007-08-07 21:19:55 +09:00]] 版) <http://gyauza.egoism.jp/clip/archives/2007/07/070720-alt-guideline/>
([[名無しさん]])

[38]
[CITE@ja[はてなアイデア - 各ユーザーIDの前にあるプロフィール画像のaltは、ユーザーIDではなくblankに変える。現状は画像OFFでIDが重複表示されるので読みにくい。]] ([CODE[2007-08-24 13:19:08 +09:00]] 版) <http://i.hatena.ne.jp/idea/8777>
([[名無しさん]])


[39]
[CITE@en[Can the alt attribute be omitted without hurting accessibility? | 456 Berea Street]] ([[Roger Johansson]] 著, [TIME[2007-09-08 08:30:51 +09:00]] 版) <http://www.456bereastreet.com/archive/200709/can_the_alt_attribute_be_omitted_without_hurting_accessibility/>
([[名無しさん]])


[[#comment]]


* [CODE(XMLe)[alt]] 要素型 (XHTML 2)

[18] [[XHTML 2]] で検討されていた 
[DFN[[CODE(XMLe)[alt]] [[要素型]]]]の[[要素]]は、
[[画像]]の[[代替文]]です。 [CODE(HTMLe)[[[img]]]]
[[要素]]の [CODE(HTMLa)[alt]] [[属性]]に変わるものとして検討されていたと思われ、
[[XHTML m12n]] の [[DTD]] に[[注釈]]がありますが、
その後公表された [[XHTML 2.0]] の [[WD]]
には [CODE(HTMLe)[[[img]]]] [[要素型]]すら存在していませんでした。

[[#comment]]


* メモ