代替文

img 要素 alt 属性 (HTML)

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

[5] 仕様書:

属性値

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

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

[25] DTD 注釈にちょこっと書いてありますが、 applet alt必須になっています。

(名無しさん)

値の中での改行

[3] 不思議マーク付けの世界では、 このツールチップ表示文字列を改行する裏技(?)があります。 改行したい場所で 
 を挿入します。

 <img alt="foo&#13;&#10;bar">
ところで、これは普通単にソースの属性値指定中でごくふつーに改行するのと同じことです。

 <img alt="foo
 bar">

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

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

 <img alt="foo<br>bar">

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

応用

[14] 一般に、代替文は次の場合に有用です。 [HTML 4]

  • 非図形的表示端末
  • フォームに対応していないブラウザ
  • 視覚障害者
  • 音声 UA
  • 画像非表示 UA

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

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

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

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

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

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

ツールチップ表示

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

但し、 title 属性が指定されていればそちらが優先されます。

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

関連

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

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

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

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

他の言語

[66] MathMLmath 要素には、数式のかわりの画像を指定する altimg 属性、かわりの文章を指定する alttext 属性があります。

不思議解釈

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

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

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

メモ

[15] 著者は次の点に注意するべきです。 [HTML 4]

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

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

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

[17] HTML 4 DTD 注釈は短い説明だと説明しています img, area, applet

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

[91] 代替文 - Weblog ( 版) <http://ryus.s21.xrea.com/w/item/958>

[90] 代替テキストで悩む瞬間 (agenda) ( 版) <http://jintrick.net/agenda/2008/11/post-435.html>

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

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

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

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

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

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

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

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

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

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

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

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

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

として示された imgalt

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

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

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

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

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

[40] alt attribute - Anne’s Weblog (2007-09-21 14:51:26 +09:00 版) <http://annevankesteren.nl/2007/09/alt> (名無しさん)

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

[42] >>41 これの著者HTML 5 を読まずに書いたのでしょうが、 HTML 5 的に見てもほぼ正しい解説です。 (名無しさん)

[43] Re: several messages relating to the alt="" attribute (Ian Hickson <ian@...> 著, 2008-04-10 22:11:38 +09:00 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13672> (名無しさん)

[44] HTML5: the war on the mandatory 'alt' - Crisp's blog (2008-05-11 15:22:58 +09:00 版) <http://crisp.tweakblogs.net/blog/695/html5-the-war-on-the-mandatory-alt.html> (名無しさん)

[46] IRC logs: freenode / #whatwg / 20080803 (2008-08-03 12:17:09 +09:00 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20080803#l-8> (名無しさん)

[47] The alt="" attribute (Ian Hickson 著, 2008-08-26 17:17:49 +09:00 版) <http://lists.w3.org/Archives/Public/public-html/2008Aug/0759.html> (名無しさん)

[48] Re: some reflections on @alt usage (and summary of research so far) (Ian Hickson 著, 2008-08-23 07:45:24 +09:00 版) <http://lists.w3.org/Archives/Public/public-html/2008Aug/0602.html> (名無しさん)

[49] Bug 180622 &#8211; Alt text should be prefixed by an icon ( 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=180622> (名無しさん)

alt 要素型 (XHTML 2)

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

[45] ちょっとしたメモ - alt要素? (Masahide Kanzaki 著, 2008-05-24 21:46:22 +09:00 版) <http://www.kanzaki.com/memo/2008/05/21-1> (名無しさん)

メモ

[50] SMIL 3.0 Media Object ( 版) <http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-media-object.html#adef-media-alt>

[51] (X)HTML5 Tracking ( 版) <http://html5.org/tools/web-apps-tracker?from=3740&to=3741>

[52] IRC logs: freenode / #whatwg / 20090817 ( 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20090817#l-256>

[53] The alt="" attribute (Ian Hickson 著, 版) <http://lists.w3.org/Archives/Public/public-html/2008Aug/0759.html>

[54] (X)HTML5 Tracking ( 版) <http://html5.org/tools/web-apps-tracker?from=4557&to=4558>

[55] alt Property (OBJECT, APPLET, AREA, ...) ( 版) <http://msdn.microsoft.com/en-us/library/ms533073(VS.85).aspx>

[56] >>55 によれば WinIE6 以降は object 要素にも alt 属性があるそうです。ただ、レンダリングには影響しないらしく、 また WinIE での DOM の実装方法故に実際に実装されているのかどうかは確認できません。

[57] HTML5 Revision Tracker ( 版) <http://html5.org/tools/web-apps-tracker?from=5025&to=5026>

[58] Bug 9217 – Remove the Paragraph-Section-Heading loophole for not providing a text alternative. ( 版) <http://www.w3.org/Bugs/Public/show_bug.cgi?id=9217>

[59] HTML5 Revision Tracker ( 版) <http://html5.org/tools/web-apps-tracker?from=5037&to=5038>

[60] HTML5: Techniques for the provision of text alternatives ( 版) <http://dev.w3.org/cvsweb/~checkout~/html5/alt-techniques/Overview.html?content-type=text/html;%20charset=utf-8>

[61] Working Group Decision on ISSUE-66 - Image Analysis Heuristics (Sam Ruby 著, 版) <http://lists.w3.org/Archives/Public/public-html/2010Jun/0001.html>

[62] HTML5: Techniques for providing useful text alternatives ( 版) <http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/>

[63] Bug 9241 – Explicitly state, "For guidance on accessibility requirements for text alternatives authors should consult WCAG 2.0" and link to WCAG 2.0 ( 版) <http://www.w3.org/Bugs/Public/show_bug.cgi?id=9241>

[64] WAI CG Consensus Resolutions on Text alternatives in HTML 5 ( 版) <http://www.w3.org/2009/06/Text-Alternatives-in-HTML5>

[65] HTML5: Techniques for providing useful text alternatives ( ( 版)) <http://www.w3.org/TR/2010/WD-html-alt-techniques-20101019/>

[67] HTML5: Techniques for providing useful text alternatives ( ( 版)) <http://www.w3.org/TR/2011/WD-html-alt-techniques-20110113/>

[68] Web Applications 1.0 r5993 9081 ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=5992&to=5993>

[69] Web Applications 1.0 r6027 apply wg decision (private communication exception) ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=6026&to=6027>

[70] Web Applications 1.0 r6028 apply wg decision (introductory text for <img>) ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=6027&to=6028>

[71] HTML5: Techniques for providing useful text alternatives ( ( 版)) <http://www.w3.org/TR/2011/WD-html-alt-techniques-20110525/>

[72] HTML5: Techniques for providing useful text alternatives ( ( 版)) <http://www.w3.org/TR/2012/WD-html-alt-techniques-20120329/>

[73] IRC logs: freenode / #whatwg / 20120518 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20120518>

[74] Web Applications 1.0 r7202 Allow conformance checkers more leeway in reporting missing alt= errors.]] ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=7201&to=7202>

[75] [whatwg] alt="" and the <meta name=generator> exception ( ( 版)) <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-August/036773.html>

[76] IRC logs: freenode / #whatwg / 20120801 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20120801>

[77] [whatwg] Conformance checking of missing alternative content for images ( ( 版)) <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-August/036960.html>

[78] Web Applications 1.0 r7250 Let's try a different approach for markup generators unable to include alt attributes. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=7249&to=7250>

[79] HTML5: Techniques for providing useful text alternatives ( ( 版)) <http://www.w3.org/TR/2012/WD-html-alt-techniques-20121025/>

[80] Overview of Alt Usage ( ( 版)) <http://htmlwg.org/alt-usage/>

[81] Examination of alt text guidance in the HTML5 Draft ( ( 版)) <http://www.davidmacd.com/WCAG/WAI/buggy.html>

[82] Web Applications 1.0 r8281 Adjust the rules on rendering images without 'alt' attributes. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=8280&to=8281>

[83] Bug 120188 – AX: Implement CSS -webkit-alt property (text alternative for generated content pseudo-elements ::before and ::after) ( ( 版)) <https://bugs.webkit.org/show_bug.cgi?id=120188>

[84] Web Applications 1.0 r2951 alt= is required, more or less... conformance checkers can say so, anyway (credit: sp) (bug: 6494)]] ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=2950&to=2951>

[85] Web Applications 1.0 r3741 Allow validators to not complain if alt= is omitted if <meta name=generator> is specified, on the assumption that we don't want WYSIWYG editors to be forced to add in bogus alt= text just to shut up validators. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=3740&to=3741>

[86] Web Applications 1.0 r7250 Let's try a different approach for markup generators unable to include alt attributes. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=7249&to=7250>

[87] Welcome to Netscape Navigator Version 1.1 ( ( 版)) <http://web.archive.org/web/20030203042026/http://wp.netscape.com/eng/mozilla/1.1/relnotes/windows-1.1.html#Images>

[88] Web Applications 1.0 r8789 Suggested alternative text for anciliary images. ( ( 版)) <https://html5.org/r/8789>

[89] HTML5: Techniques for providing useful text alternatives ( ( 版)) <http://www.w3.org/TR/2014/WD-html-alt-techniques-20141023/>

[92] HTML5: Techniques for providing useful text alternatives ( ( 版)) <http://www.w3.org/TR/2015/NOTE-html-alt-techniques-20150521/>

[93] The images /images/sample-bdi.png and /images/sample-not-bdi.png has no alt attribute · Issue #750 · whatwg/html ( 版) <https://github.com/whatwg/html/issues/750>

[94] Re: [css-pseudo] please make sure pseudo-element "alt" property makes it into next ED ( (fantasai著, )) <https://lists.w3.org/Archives/Public/www-style/2014Nov/0046.html>

[95] 京町家・中古住宅をリノベーションにより上質な空間へとプロデュースする京都の不動産会社 株式会社 八清(ハチセ,Hachise) ( ()) <http://www.hachise.jp/>

<h2 id="newarrivals_h2" class="h2_back"><img src="index/img/h2_newarrivals.png" width="270" height="75" alt="新着物件"/><span>新着物件</span></h2>

[96] Office 365の新機能「画像認識による代替テキスト自動生成機能」 | スラド IT () <http://it.srad.jp/story/16/12/06/0454236/>

[97] はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました(はてな記法モード、Markdownモード) - はてなブログ開発ブログ () <http://staff.hatenablog.com/entry/2017/02/24/152000>

はてなブログでは、はてなフォトライフに投稿した画像を表示するはてな記法(fotolife記法)を拡張し、画像(img要素)のtitle属性とalt属性を指定できるようにしました。

[98] Micropub () <https://micropub.net/draft/#uploading-a-photo-with-alt-text>

In order to support more complex values of properties, you can create a post with JSON syntax by sending the entry in the parsed Microformats 2 JSON format.

[99] remove requirement to ignore title when alt is empty (stevefaulkner著, ) <https://github.com/w3c/html-aam/commit/6da0fef9384b6a67c5f6b79d3c02a33994d350bf>

[100] WCAG/HTML name computation discrepancy with `<img alt="" title="foo"> · Issue #99 · w3c/html-aam () <https://github.com/w3c/html-aam/issues/99>

[101] clarify img with empty alt / issue #54 (jasonkiss著, ) <https://github.com/w3c/html-aam/commit/b692be14ef497acfbc8e4b4aef25325d59bb18a1>

[102] HTML-AAM: "img (alt attribute is empty)" reword for clarity · Issue #54 · w3c/html-aam () <https://github.com/w3c/html-aam/issues/54>

[103] Clarify image display when src is an empty string, again (mwenge著, ) <https://github.com/whatwg/html/commit/50c65e0c896a8fff2ed499cb3a1e325c56e61411>

[104] clarify empty alt / issue #55 (jasonkiss著, ) <https://github.com/w3c/html-aam/commit/a967061e00ec9500b7edf050f172624e4d029acc>

[105] HTML-AAM: how to treat <img alt> with no value · Issue #55 · w3c/html-aam () <https://github.com/w3c/html-aam/issues/55>