[html5] r1955 - [e] (0) Move the alt text requirements into their own section so that it is easi [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Jul 29 19:19:22 PDT 2008
Author: ianh
Date: 2008-07-29 19:19:21 -0700 (Tue, 29 Jul 2008)
New Revision: 1955
Modified:
index
source
Log:
[e] (0) Move the alt text requirements into their own section so that it is easier to find them.
Modified: index
===================================================================
--- index 2008-07-30 01:48:00 UTC (rev 1954)
+++ index 2008-07-30 02:19:21 UTC (rev 1955)
@@ -695,6 +695,10 @@
<li><a href="#the-img"><span class=secno>4.7.2 </span>The
<code>img</code> element</a>
+ <ul class=toc>
+ <li><a href="#alt"><span class=secno>4.7.2.1. </span>Requirements
+ for providing text to act as an alternative for images</a>
+ </ul>
<li><a href="#the-iframe"><span class=secno>4.7.3 </span>The
<code>iframe</code> element</a>
@@ -15393,7 +15397,7 @@
<dt>Element-specific attributes:
- <dd><code title=attr-img-alt><a href="#alt">alt</a></code>
+ <dd><code title=attr-img-alt><a href="#alt0">alt</a></code>
<dd><code title=attr-img-src><a href="#src">src</a></code>
@@ -15413,7 +15417,7 @@
NamedConstructor=<a href="#image0" title=dom-image-w>Image</a>(in unsigned long width),
NamedConstructor=<a href="#image1" title=dom-image-wh>Image</a>(in unsigned long width, in unsigned long height)]
interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
- attribute DOMString <a href="#alt0" title=dom-img-alt>alt</a>;
+ attribute DOMString <a href="#alt1" title=dom-img-alt>alt</a>;
attribute DOMString <a href="#src0" title=dom-img-src>src</a>;
attribute DOMString <a href="#usemap" title=dom-img-useMap>useMap</a>;
attribute boolean <a href="#ismap0" title=dom-img-isMap>isMap</a>;
@@ -15427,21 +15431,265 @@
<p>The image given by the <dfn id=src
title=attr-img-src><code>src</code></dfn> attribute is the embedded
- content, and the value of the <dfn id=alt
+ content, and the value of the <dfn id=alt0
title=attr-img-alt><code>alt</code></dfn> attribute is the <code><a
href="#img">img</a></code> element's <a href="#fallback">fallback
content</a>.
<p><strong>Authoring requirements</strong>: The <code title=attr-img-src><a
href="#src">src</a></code> attribute must be present, and must contain a
- <a href="#valid">valid URL</a>.
+ <a href="#valid">valid URL</a>. The requirements on the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute's value are
+ described <a href="#alt">in the next section</a>.
<p class=big-issue>Should we restrict the URL to pointing to an image?
What's an image? Is PDF an image? (Safari supports PDFs in <img>
elements.) How about SVG? (Opera supports those). WMFs? XPMs? HTML?
+ <p class=big-issue>There has been some suggestion that the <code
+ title="">longdesc</code> attribute from HTML4, or some other mechanism
+ that is more powerful than <code title="">alt=""</code>, should be
+ included. This has not yet been considered.
+
+ <p>The <code><a href="#img">img</a></code> must not be used as a layout
+ tool. In particular, <code><a href="#img">img</a></code> elements should
+ not be used to display fully transparent images, as they rarely convey
+ meaning and rarely add anything useful to the document.
+
+ <hr>
+
+ <p><strong>User agent requirements</strong>: When the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute is present and
+ its value is the empty string, the image supplements the surrounding
+ content. In such cases, the image may be omitted without affecting the
+ meaning of the document.
+
+ <p>When the <code title=attr-img-alt><a href="#alt0">alt</a></code>
+ attribute is present and its value is not the empty string, the image is a
+ graphical equivalent of the string given in the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute. In such
+ cases, the image may be replaced in the rendering by the string given in
+ the attribute without significantly affecting the meaning of the document.
+
+ <p>When the <code title=attr-img-alt><a href="#alt0">alt</a></code>
+ attribute is missing, the image represents a key part of the content.
+ Non-visual user agents should apply image analysis heuristics to help the
+ user make sense of the image.
+
+ <p>The <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute
+ does not represent advisory information. User agents must not present the
+ contents of the <code title=attr-img-alt><a href="#alt0">alt</a></code>
+ attribute in the same way as content of the <code title=attr-title><a
+ href="#title">title</a></code> attribute.
+
+ <p>If the <code title=attr-img-src><a href="#src">src</a></code> attribute
+ is omitted, the image represents whatever string is given by the element's
+ <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute, if any,
+ or nothing, if that attribute is empty or absent.
+
+ <hr>
+
+ <p>When an <code><a href="#img">img</a></code> is created with a <code
+ title=attr-img-src><a href="#src">src</a></code> attribute, and whenever
+ the <code title=attr-img-src><a href="#src">src</a></code> attribute is
+ set subsequently, the user agent must fetch the resource specifed by the
+ <code title=attr-img-src><a href="#src">src</a></code> attribute's value,
+ unless the user agent cannot support images, or its support for images has
+ been disabled, or the user agent only fetches elements on demand.</p>
+ <!-- Note how this does NOT happen when the base URL changes. -->
+
+ <p>Fetching the image must <a href="#delays">delay the <code
+ title=event-load>load</code> event</a>.
+
+ <p class=warning>This, unfortunately, can be used to perform a rudimentary
+ port scan of the user's local network (especially in conjunction with
+ scripting, though scripting isn't actually necessary to carry out such an
+ attack). User agents may implement <a href="#origin0"
+ title=origin>cross-origin</a> access control policies that mitigate this
+ attack.
+
+ <p>Once the resource has been fetched, if the image is a valid image, the
+ user agent must <a href="#firing4">fire a <code
+ title=event-load>load</code> event</a> on the <code><a
+ href="#img">img</a></code> element (this happens after <code
+ title=dom-img-complete><a href="#complete">complete</a></code> starts
+ returning true). If the download fails or it completes but the image is
+ not a valid or supported image, the user agent must <a
+ href="#firing5">fire an <code title=event-error>error</code> event</a> on
+ the <code><a href="#img">img</a></code> element.
+
+ <p>The remote server's response metadata (e.g. an HTTP 404 status code, or
+ <a href="#content-type5" title=Content-Type>associated Content-Type
+ headers</a>) must be ignored when determining whether the resource
+ obtained is a valid image or not.
+
+ <p class=note>This allows servers to return images with error responses.
+
+ <p>User agents must not support non-image resources with the <code><a
+ href="#img">img</a></code> element.
+
+ <hr>
+
+ <p>The <code title=attr-hyperlink-usemap><a
+ href="#usemap1">usemap</a></code> attribute, if present, can indicate that
+ the image has an associated <a href="#image2">image map</a>.
+
+ <p>The <dfn id=ismap title=attr-img-ismap><code>ismap</code></dfn>
+ attribute, when used on an element that is a descendant of an <code><a
+ href="#a">a</a></code> element with an <code title=attr-hyperlink-href><a
+ href="#href6">href</a></code> attribute, indicates by its presence that
+ the element provides access to a server-side image map. This affects how
+ events are handled on the corresponding <code><a href="#a">a</a></code>
+ element.
+
+ <p>The <code title=attr-img-ismap><a href="#ismap">ismap</a></code>
+ attribute is a <a href="#boolean0">boolean attribute</a>. The attribute
+ must not be specified on an element that does not have an ancestor
+ <code><a href="#a">a</a></code> element with an <code
+ title=attr-hyperlink-href><a href="#href6">href</a></code> attribute.
+
+ <p>The <code><a href="#img">img</a></code> element supports <a
+ href="#dimension0">dimension attributes</a>.</p>
+ <!-- XXX contents of <img> should be ignored for rendering but not
+ for semantics, e.g. <script>, <input>, etc. -->
+
+ <p>The DOM attributes <dfn id=alt1
+ title=dom-img-alt><code>alt</code></dfn>, <dfn id=src0
+ title=dom-img-src><code>src</code></dfn>, <dfn id=usemap
+ title=dom-img-useMap><code>useMap</code></dfn>, and <dfn id=ismap0
+ title=dom-img-isMap><code>isMap</code></dfn> each must <a
+ href="#reflect">reflect</a> the respective content attributes of the same
+ name.
+
+ <p>The DOM attributes <dfn id=width
+ title=dom-img-width><code>width</code></dfn> and <dfn id=height
+ title=dom-img-height><code>height</code></dfn> must return the rendered
+ width and height of the image, in CSS pixels, if the image is being
+ rendered, and is being rendered to a visual medium; or else the intrinsic
+ with and height of the image, in CSS pixels, if the image is available but
+ not being rendered to a visual medium; or else 0, if the image is not
+ available or its dimensions are not known. <a
+ href="#refsCSS21">[CSS21]</a>
+
+ <p>The DOM attribute <dfn id=complete
+ title=dom-img-complete><code>complete</code></dfn> must return true if the
+ user agent has downloaded the image specified in the <code
+ title=attr-img-src><a href="#src">src</a></code> attribute, and it is a
+ valid image, and false otherwise.
+
+ <p class=note>The value of <code title=dom-img-complete><a
+ href="#complete">complete</a></code> can change while a script is
+ executing.
+
+ <p>Three constructors are provided for creating <code><a
+ href="#htmlimageelement">HTMLImageElement</a></code> objects (in addition
+ to the factory methods from DOM Core such as <code
+ title="">createElement()</code>): <dfn id=image
+ title=dom-image><code>Image()</code></dfn>, <dfn id=image0
+ title=dom-image-w><code>Image(<var title="">width</var>)</code></dfn>, and
+ <dfn id=image1 title=dom-image-wh><code>Image(<var title="">width</var>,
+ <var title="">height</var>)</code></dfn>. When invoked as constructors,
+ these must return a new <code><a
+ href="#htmlimageelement">HTMLImageElement</a></code> object (a new
+ <code><a href="#img">img</a></code> element). If the <var
+ title="">width</var> argument is present, the new object's <code
+ title=attr-img-width>width</code> content attribute must be set to <var
+ title="">width</var>. If the <var title="">height</var> argument is also
+ present, the new object's <code title=attr-img-height>height</code>
+ content attribute must be set to <var title="">height</var>.
+
+ <div class=example>
+ <p>A single image can have different appropriate alternative text
+ depending on the context.</p>
+
+ <p>In each of the following cases, the same image is used, yet the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> text is different each
+ time. The image is the coat of arms of the Canton Geneva in Switzerland.</p>
+
+ <p>Here it is used as a supplementary icon:</p>
+
+ <pre><p>I lived in <img src="carouge.svg" alt=""> Carouge.</p></pre>
+
+ <p>Here it is used as an icon representing the town:</p>
+
+ <pre><p>Home town: <img src="carouge.svg" alt="Carouge"></p></pre>
+
+ <p>Here it is used as part of a text on the town:</p>
+
+ <pre><p>Carouge has a coat of arms.</p>
+<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
+<p>It is used as decoration all over the town.</p></pre>
+
+ <p>Here it is used as a way to support a similar text where the
+ description is given as well as, instead of as an alternative to, the
+ image:</p>
+
+ <pre><p>Carouge has a coat of arms.</p>
+<p><img src="carouge.svg" alt=""></p>
+<p>The coat of arms depicts a lion, sitting in front of a tree.
+It is used as decoration all over the town.</p></pre>
+
+ <p>Here it is used as part of a story:</p>
+
+ <pre><p>He picked up the folder and a piece of paper fell out.</p>
+<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
+red background, a green tree, and a yellow lion with its tongue
+hanging out and whose tail was shaped like an S."></p>
+<p>He stared at the folder. S! The answer he had been looking for all
+this time was simply the letter S! How had he not seen that before? It all
+came together now. The phone call where Hector had referred to a lion's tail,
+the time Marco had stuck his tongue out...</p></pre>
+ </div>
+
+ <div class=example>
+ <p>Here are some more examples showing the same picture used in different
+ contexts, with different appropriate alternate texts each time.</p>
+
+ <pre><article>
+ <h1>My cats</h1>
+ <h2>Fluffy</h2>
+ <p>Fluffy is my favourite.</p>
+ <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
+ <p>She's just too cute.</p>
+ <h2>Miles</h2>
+ <p>My other cat, Miles just eats and sleeps.</p>
+</article></pre>
+
+ <pre><article>
+ <h1>Photography</h1>
+ <h2>Shooting moving targets indoors</h2>
+ <p>The trick here is to know how to anticipate; to know at what speed and
+ what distance the subject will pass by.</p>
+ <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
+ photographed quite nicely using this technique.">
+ <h2>Nature by night</h2>
+ <p>To achieve this, you'll need either an extremely sensitive film, or
+ immense flash lights.</p>
+</article></pre>
+
+ <pre><article>
+ <h1>About me</h1>
+ <h2>My pets</h2>
+ <p>I've got a cat named Fluffy and a dog named Miles.</p>
+ <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
+ <p>My dog Miles and I like go on long walks together.</p>
+ <h2>music</h2>
+ <p>After our walks, having emptied my mind, I like listening to Bach.</p>
+</article></pre>
+
+ <pre><article>
+ <h1>Fluffy and the Yarn</h1>
+ <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
+ <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
+ <p>He would play in the morning, he would play in the evening.</p>
+</article></pre>
+ </div>
+
+ <h5 id=alt><span class=secno>4.7.2.1. </span>Requirements for providing
+ text to act as an alternative for images</h5>
+
<p>The requirements for the <code title=attr-img-alt><a
- href="#alt">alt</a></code> attribute depend on what the image is intended
+ href="#alt0">alt</a></code> attribute depend on what the image is intended
to represent:
<dl>
@@ -15459,15 +15707,16 @@
are blind) are still able to understand the message being conveyed.</p>
<p>The text must be given in the <code title=attr-img-alt><a
- href="#alt">alt</a></code> attribute, and must convey the same message
+ href="#alt0">alt</a></code> attribute, and must convey the same message
as the image specified in the <code title=attr-img-src><a
href="#src">src</a></code> attribute.</p>
<div class=example>
<p>In the following example we have <a
href="images/parsing-model-overview.png">a flowchart</a> in image form,
- with text in the <code title=attr-img-alt><a href="#alt">alt</a></code>
- attribute rephrasing the flowchart in prose form:</p>
+ with text in the <code title=attr-img-alt><a
+ href="#alt0">alt</a></code> attribute rephrasing the flowchart in prose
+ form:</p>
<pre><p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
@@ -15520,12 +15769,12 @@
<p>In some cases, the icon is supplemental to a text label conveying the
same meaning. In those cases, the <code title=attr-img-alt><a
- href="#alt">alt</a></code> attribute must be present but must be empty.</p>
+ href="#alt0">alt</a></code> attribute must be present but must be empty.</p>
<div class=example>
<p>Here the icons are next to text that conveys the same meaning, so
they have an empty <code title=attr-img-alt><a
- href="#alt">alt</a></code> attribute:</p>
+ href="#alt0">alt</a></code> attribute:</p>
<pre><nav>
<p><a href="/help/"><strong><img src="/icons/help.png" alt=""></strong> Help</a></p>
@@ -15537,7 +15786,7 @@
<p>In other cases, the icon has no text next to it describing what it
means; the icon is supposed to be self-explanatory. In those cases, an
equivalent textual label must be given in the <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute.</p>
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute.</p>
<div class=example>
<p>Here, posts on a news site are labeled with an icon indicating their
@@ -15570,15 +15819,15 @@
software package, country, or some such.</p>
<p>If the logo is being used to represent the entity, the <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute must contain
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute must contain
the name of the entity being represented by the logo. The <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute must
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute must
<em>not</em> contain text like the word "logo", as it is not the fact
that it is a logo that is being conveyed, it's the entity itself.</p>
<p>If the logo is being used next to the name of the entity that it
represents, then the logo is supplemental, and its <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute must instead
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute must instead
be empty.</p>
<p>If the logo is merely used as decorative material (as branding, or,
@@ -15639,8 +15888,8 @@
<dd>
<p>In many cases, the image is actually just supplementary, and its
presence merely reinforces the surrounding text. In these cases, the
- <code title=attr-img-alt><a href="#alt">alt</a></code> attribute must be
- present but its value must be the empty string.</p>
+ <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute must
+ be present but its value must be the empty string.</p>
<div class=example>
<p>A flowchart that repeats the previous paragraph in graphical form:</p>
@@ -15674,7 +15923,7 @@
<p>In some cases, the image isn't discussed by the surrounding text, but
it has some relevance. Such images are decorative, but still form part
of the content. In these cases, the <code title=attr-img-alt><a
- href="#alt">alt</a></code> attribute must be present but its value must
+ href="#alt0">alt</a></code> attribute must be present but its value must
be the empty string.
<div class=example>
@@ -15715,18 +15964,18 @@
part of a comic strip, or is a photograph in a blog entry about that
photograph, text that conveys can serve as a substitute for the image
must be given as the contents of the <code title=attr-img-alt><a
- href="#alt">alt</a></code> attribute.</p>
+ href="#alt0">alt</a></code> attribute.</p>
<p>In a rare subset of these cases, there might be no alternative text
available. This could be the case, for instance, on a photo upload site,
if the site has received 8000 photos from a user without the user
annotating any of them. In such cases, the <code title=attr-img-alt><a
- href="#alt">alt</a></code> attribute may be omitted, but the <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute should be
+ href="#alt0">alt</a></code> attribute may be omitted, but the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute should be
included, with a useful value, if at all possible.</p>
<p>In any case, if an image is a key part of the content, the <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute must not be
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute must not be
specified with an empty value.</p>
<div class=example>
@@ -15791,7 +16040,7 @@
they have a very slow connection, or because they are using a text-only
browser, or because they are listening to the page being read out by a
hands-free automobile voice Web browser, or simply because they are
- blind), the <code title=attr-img-alt><a href="#alt">alt</a></code>
+ blind), the <code title=attr-img-alt><a href="#alt0">alt</a></code>
attribute is only allowed to be omitted when no alternative text is
available and none can be made available, e.g. on automated image
gallery sites.</p>
@@ -15802,7 +16051,7 @@
<dd>
<p>When an image is included in a communication (such as an HTML e-mail)
aimed at someone who is known to be able to view images, the <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute may be
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute may be
omitted. However, even in such cases it is strongly recommended that
alternative text be included (as appropriate according to the kind of
image involved, as described in the above entries), so that the e-mail
@@ -15811,245 +16060,6 @@
abilities might not include easily seeing images.</p>
</dl>
- <p>The <code><a href="#img">img</a></code> must not be used as a layout
- tool. In particular, <code><a href="#img">img</a></code> elements should
- not be used to display fully transparent images, as they rarely convey
- meaning and rarely add anything useful to the document.
-
- <p class=big-issue>There has been some suggestion that the <code
- title="">longdesc</code> attribute from HTML4, or some other mechanism
- that is more powerful than <code title="">alt=""</code>, should be
- included. This has not yet been considered.
-
- <hr>
-
- <p><strong>User agent requirements</strong>: When the <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute is present and
- its value is the empty string, the image supplements the surrounding
- content. In such cases, the image may be omitted without affecting the
- meaning of the document.
-
- <p>When the <code title=attr-img-alt><a href="#alt">alt</a></code>
- attribute is present and its value is not the empty string, the image is a
- graphical equivalent of the string given in the <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute. In such cases,
- the image may be replaced in the rendering by the string given in the
- attribute without significantly affecting the meaning of the document.
-
- <p>When the <code title=attr-img-alt><a href="#alt">alt</a></code>
- attribute is missing, the image represents a key part of the content.
- Non-visual user agents should apply image analysis heuristics to help the
- user make sense of the image.
-
- <p>The <code title=attr-img-alt><a href="#alt">alt</a></code> attribute
- does not represent advisory information. User agents must not present the
- contents of the <code title=attr-img-alt><a href="#alt">alt</a></code>
- attribute in the same way as content of the <code title=attr-title><a
- href="#title">title</a></code> attribute.
-
- <p>If the <code title=attr-img-src><a href="#src">src</a></code> attribute
- is omitted, the image represents whatever string is given by the element's
- <code title=attr-img-alt><a href="#alt">alt</a></code> attribute, if any,
- or nothing, if that attribute is empty or absent.
-
- <hr>
-
- <p>When an <code><a href="#img">img</a></code> is created with a <code
- title=attr-img-src><a href="#src">src</a></code> attribute, and whenever
- the <code title=attr-img-src><a href="#src">src</a></code> attribute is
- set subsequently, the user agent must fetch the resource specifed by the
- <code title=attr-img-src><a href="#src">src</a></code> attribute's value,
- unless the user agent cannot support images, or its support for images has
- been disabled, or the user agent only fetches elements on demand.</p>
- <!-- Note how this does NOT happen when the base URL changes. -->
-
- <p>Fetching the image must <a href="#delays">delay the <code
- title=event-load>load</code> event</a>.
-
- <p class=warning>This, unfortunately, can be used to perform a rudimentary
- port scan of the user's local network (especially in conjunction with
- scripting, though scripting isn't actually necessary to carry out such an
- attack). User agents may implement <a href="#origin0"
- title=origin>cross-origin</a> access control policies that mitigate this
- attack.
-
- <p>Once the resource has been fetched, if the image is a valid image, the
- user agent must <a href="#firing4">fire a <code
- title=event-load>load</code> event</a> on the <code><a
- href="#img">img</a></code> element (this happens after <code
- title=dom-img-complete><a href="#complete">complete</a></code> starts
- returning true). If the download fails or it completes but the image is
- not a valid or supported image, the user agent must <a
- href="#firing5">fire an <code title=event-error>error</code> event</a> on
- the <code><a href="#img">img</a></code> element.
-
- <p>The remote server's response metadata (e.g. an HTTP 404 status code, or
- <a href="#content-type5" title=Content-Type>associated Content-Type
- headers</a>) must be ignored when determining whether the resource
- obtained is a valid image or not.
-
- <p class=note>This allows servers to return images with error responses.
-
- <p>User agents must not support non-image resources with the <code><a
- href="#img">img</a></code> element.
-
- <hr>
-
- <p>The <code title=attr-hyperlink-usemap><a
- href="#usemap1">usemap</a></code> attribute, if present, can indicate that
- the image has an associated <a href="#image2">image map</a>.
-
- <p>The <dfn id=ismap title=attr-img-ismap><code>ismap</code></dfn>
- attribute, when used on an element that is a descendant of an <code><a
- href="#a">a</a></code> element with an <code title=attr-hyperlink-href><a
- href="#href6">href</a></code> attribute, indicates by its presence that
- the element provides access to a server-side image map. This affects how
- events are handled on the corresponding <code><a href="#a">a</a></code>
- element.
-
- <p>The <code title=attr-img-ismap><a href="#ismap">ismap</a></code>
- attribute is a <a href="#boolean0">boolean attribute</a>. The attribute
- must not be specified on an element that does not have an ancestor
- <code><a href="#a">a</a></code> element with an <code
- title=attr-hyperlink-href><a href="#href6">href</a></code> attribute.
-
- <p>The <code><a href="#img">img</a></code> element supports <a
- href="#dimension0">dimension attributes</a>.</p>
- <!-- XXX contents of <img> should be ignored for rendering but not
- for semantics, e.g. <script>, <input>, etc. -->
-
- <p>The DOM attributes <dfn id=alt0
- title=dom-img-alt><code>alt</code></dfn>, <dfn id=src0
- title=dom-img-src><code>src</code></dfn>, <dfn id=usemap
- title=dom-img-useMap><code>useMap</code></dfn>, and <dfn id=ismap0
- title=dom-img-isMap><code>isMap</code></dfn> each must <a
- href="#reflect">reflect</a> the respective content attributes of the same
- name.
-
- <p>The DOM attributes <dfn id=width
- title=dom-img-width><code>width</code></dfn> and <dfn id=height
- title=dom-img-height><code>height</code></dfn> must return the rendered
- width and height of the image, in CSS pixels, if the image is being
- rendered, and is being rendered to a visual medium; or else the intrinsic
- with and height of the image, in CSS pixels, if the image is available but
- not being rendered to a visual medium; or else 0, if the image is not
- available or its dimensions are not known. <a
- href="#refsCSS21">[CSS21]</a>
-
- <p>The DOM attribute <dfn id=complete
- title=dom-img-complete><code>complete</code></dfn> must return true if the
- user agent has downloaded the image specified in the <code
- title=attr-img-src><a href="#src">src</a></code> attribute, and it is a
- valid image, and false otherwise.
-
- <p class=note>The value of <code title=dom-img-complete><a
- href="#complete">complete</a></code> can change while a script is
- executing.
-
- <p>Three constructors are provided for creating <code><a
- href="#htmlimageelement">HTMLImageElement</a></code> objects (in addition
- to the factory methods from DOM Core such as <code
- title="">createElement()</code>): <dfn id=image
- title=dom-image><code>Image()</code></dfn>, <dfn id=image0
- title=dom-image-w><code>Image(<var title="">width</var>)</code></dfn>, and
- <dfn id=image1 title=dom-image-wh><code>Image(<var title="">width</var>,
- <var title="">height</var>)</code></dfn>. When invoked as constructors,
- these must return a new <code><a
- href="#htmlimageelement">HTMLImageElement</a></code> object (a new
- <code><a href="#img">img</a></code> element). If the <var
- title="">width</var> argument is present, the new object's <code
- title=attr-img-width>width</code> content attribute must be set to <var
- title="">width</var>. If the <var title="">height</var> argument is also
- present, the new object's <code title=attr-img-height>height</code>
- content attribute must be set to <var title="">height</var>.
-
- <div class=example>
- <p>A single image can have different appropriate alternative text
- depending on the context.</p>
-
- <p>In each of the following cases, the same image is used, yet the <code
- title=attr-img-alt><a href="#alt">alt</a></code> text is different each
- time. The image is the coat of arms of the Canton Geneva in Switzerland.</p>
-
- <p>Here it is used as a supplementary icon:</p>
-
- <pre><p>I lived in <img src="carouge.svg" alt=""> Carouge.</p></pre>
-
- <p>Here it is used as an icon representing the town:</p>
-
- <pre><p>Home town: <img src="carouge.svg" alt="Carouge"></p></pre>
-
- <p>Here it is used as part of a text on the town:</p>
-
- <pre><p>Carouge has a coat of arms.</p>
-<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
-<p>It is used as decoration all over the town.</p></pre>
-
- <p>Here it is used as a way to support a similar text where the
- description is given as well as, instead of as an alternative to, the
- image:</p>
-
- <pre><p>Carouge has a coat of arms.</p>
-<p><img src="carouge.svg" alt=""></p>
-<p>The coat of arms depicts a lion, sitting in front of a tree.
-It is used as decoration all over the town.</p></pre>
-
- <p>Here it is used as part of a story:</p>
-
- <pre><p>He picked up the folder and a piece of paper fell out.</p>
-<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
-red background, a green tree, and a yellow lion with its tongue
-hanging out and whose tail was shaped like an S."></p>
-<p>He stared at the folder. S! The answer he had been looking for all
-this time was simply the letter S! How had he not seen that before? It all
-came together now. The phone call where Hector had referred to a lion's tail,
-the time Marco had stuck his tongue out...</p></pre>
- </div>
-
- <div class=example>
- <p>Here are some more examples showing the same picture used in different
- contexts, with different appropriate alternate texts each time.</p>
-
- <pre><article>
- <h1>My cats</h1>
- <h2>Fluffy</h2>
- <p>Fluffy is my favourite.</p>
- <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
- <p>She's just too cute.</p>
- <h2>Miles</h2>
- <p>My other cat, Miles just eats and sleeps.</p>
-</article></pre>
-
- <pre><article>
- <h1>Photography</h1>
- <h2>Shooting moving targets indoors</h2>
- <p>The trick here is to know how to anticipate; to know at what speed and
- what distance the subject will pass by.</p>
- <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
- photographed quite nicely using this technique.">
- <h2>Nature by night</h2>
- <p>To achieve this, you'll need either an extremely sensitive film, or
- immense flash lights.</p>
-</article></pre>
-
- <pre><article>
- <h1>About me</h1>
- <h2>My pets</h2>
- <p>I've got a cat named Fluffy and a dog named Miles.</p>
- <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
- <p>My dog Miles and I like go on long walks together.</p>
- <h2>music</h2>
- <p>After our walks, having emptied my mind, I like listening to Bach.</p>
-</article></pre>
-
- <pre><article>
- <h1>Fluffy and the Yarn</h1>
- <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
- <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
- <p>He would play in the morning, he would play in the evening.</p>
-</article></pre>
- </div>
-
<h4 id=the-iframe><span class=secno>4.7.3 </span>The <dfn
id=iframe><code>iframe</code></dfn> element</h4>
@@ -22815,7 +22825,7 @@
<dt>Element-specific attributes:
- <dd><code title=attr-area-alt><a href="#alt1">alt</a></code>
+ <dd><code title=attr-area-alt><a href="#alt2">alt</a></code>
<dd><code title=attr-area-coords><a href="#coords">coords</a></code>
@@ -22841,7 +22851,7 @@
<dd>
<pre
class=idl>interface <dfn id=htmlareaelement>HTMLAreaElement</dfn> : <a href="#htmlelement">HTMLElement</a> {
- attribute DOMString <a href="#alt2" title=dom-area-alt>alt</a>;
+ attribute DOMString <a href="#alt3" title=dom-area-alt>alt</a>;
attribute DOMString <a href="#coords0" title=dom-area-coords>coords</a>;
attribute DOMString <a href="#shape0" title=dom-area-shape>shape</a>;
attribute DOMString <a href="#href4" title=dom-area-href>href</a>;
@@ -22862,7 +22872,7 @@
<p>If the <code><a href="#area">area</a></code> element has an <code
title=attr-hyperlink-href><a href="#href6">href</a></code> attribute, then
the <code><a href="#area">area</a></code> element represents a <a
- href="#hyperlinks">hyperlink</a>. In this case, the <dfn id=alt1
+ href="#hyperlinks">hyperlink</a>. In this case, the <dfn id=alt2
title=attr-area-alt><code>alt</code></dfn> attribute must be present. It
specifies the text of the hyperlink. Its value must be text that, when
presented with the texts specified for the other hyperlinks of the <a
@@ -22870,16 +22880,16 @@
but without the image itself, provides the user with the same kind of
choice as the hyperlink would when used without its text but with its
shape applied to the image. The <code title=attr-area-alt><a
- href="#alt1">alt</a></code> attribute may be left blank if there is
+ href="#alt2">alt</a></code> attribute may be left blank if there is
another <code><a href="#area">area</a></code> element in the same <a
href="#image2">image map</a> that points to the same resource and has a
- non-blank <code title=attr-area-alt><a href="#alt1">alt</a></code>
+ non-blank <code title=attr-area-alt><a href="#alt2">alt</a></code>
attribute.
<p>If the <code><a href="#area">area</a></code> element has no <code
title=attr-hyperlink-href><a href="#href6">href</a></code> attribute, then
the area represented by the element cannot be selected, and the <code
- title=attr-area-alt><a href="#alt1">alt</a></code> attribute must be
+ title=attr-area-alt><a href="#alt2">alt</a></code> attribute must be
omitted.
<p>In both cases, the <code title=attr-area-shape><a
@@ -23048,7 +23058,7 @@
title="interactive elements">will cause</span> the aforementioned <a
href="#activation0">activation behavior</a> to be invoked.
- <p>The DOM attributes <dfn id=alt2
+ <p>The DOM attributes <dfn id=alt3
title=dom-area-alt><code>alt</code></dfn>, <dfn id=coords0
title=dom-area-coords><code>coords</code></dfn>, <dfn id=href4
title=dom-area-href><code>href</code></dfn>, <dfn id=target2
@@ -23139,13 +23149,13 @@
<li>
<p>Remove all the <code><a href="#area">area</a></code> elements in <var
title="">areas</var> that have no <code title=attr-area-alt><a
- href="#alt1">alt</a></code> attribute, or whose <code
- title=attr-area-alt><a href="#alt1">alt</a></code> attribute's value is
+ href="#alt2">alt</a></code> attribute, or whose <code
+ title=attr-area-alt><a href="#alt2">alt</a></code> attribute's value is
the empty string, <em>if</em> there is another <code><a
href="#area">area</a></code> element in <var title="">areas</var> with
the same value in the <code title=attr-hyperlink-href><a
href="#href6">href</a></code> attribute and with a non-empty <code
- title=attr-area-alt><a href="#alt1">alt</a></code> attribute.
+ title=attr-area-alt><a href="#alt2">alt</a></code> attribute.
<li>
<p>Each remaining <code><a href="#area">area</a></code> element in <var
Modified: source
===================================================================
--- source 2008-07-30 01:48:00 UTC (rev 1954)
+++ source 2008-07-30 02:19:21 UTC (rev 1955)
@@ -12984,13 +12984,265 @@
<p><strong>Authoring requirements</strong>: The <code
title="attr-img-src">src</code> attribute must be present, and must
- contain a <span>valid URL</span>.</p>
+ contain a <span>valid URL</span>. The requirements on the <code
+ title="attr-img-alt">alt</code> attribute's value are described <a
+ href="#alt">in the next section</a>.</p>
<p class="big-issue">Should we restrict the URL to pointing to an
image? What's an image? Is PDF an image? (Safari supports PDFs in
<img> elements.) How about SVG? (Opera supports those). WMFs?
XPMs? HTML?</p>
+ <p class="big-issue">There has been some suggestion that the <code
+ title="">longdesc</code> attribute from HTML4, or some other
+ mechanism that is more powerful than <code title="">alt=""</code>,
+ should be included. This has not yet been considered.</p>
+
+ <p>The <code>img</code> must not be used as a layout tool. In
+ particular, <code>img</code> elements should not be used to display
+ fully transparent images, as they rarely convey meaning and rarely
+ add anything useful to the document.</p>
+
+ <hr>
+
+ <p><strong>User agent requirements</strong>: When the <code
+ title="attr-img-alt">alt</code> attribute is present and its value
+ is the empty string, the image supplements the surrounding
+ content. In such cases, the image may be omitted without affecting
+ the meaning of the document.</p>
+
+ <p>When the <code title="attr-img-alt">alt</code> attribute is
+ present and its value is not the empty string, the image is a
+ graphical equivalent of the string given in the <code
+ title="attr-img-alt">alt</code> attribute. In such cases, the image
+ may be replaced in the rendering by the string given in the
+ attribute without significantly affecting the meaning of the
+ document.</p>
+
+ <p>When the <code title="attr-img-alt">alt</code> attribute is
+ missing, the image represents a key part of the content. Non-visual
+ user agents should apply image analysis heuristics to help the user
+ make sense of the image.</p>
+
+ <p>The <code title="attr-img-alt">alt</code> attribute does not
+ represent advisory information. User agents must not present the
+ contents of the <code title="attr-img-alt">alt</code> attribute in
+ the same way as content of the <code title="attr-title">title</code>
+ attribute.</p>
+
+ <p>If the <code title="attr-img-src">src</code> attribute is
+ omitted, the image represents whatever string is given by the
+ element's <code title="attr-img-alt">alt</code> attribute, if any,
+ or nothing, if that attribute is empty or absent.</p>
+
+ <hr>
+
+ <p>When an <code>img</code> is created with a <code
+ title="attr-img-src">src</code> attribute, and whenever the <code
+ title="attr-img-src">src</code> attribute is set subsequently, the
+ user agent must fetch the resource specifed by the <code
+ title="attr-img-src">src</code> attribute's value, unless the user
+ agent cannot support images, or its support for images has been
+ disabled, or the user agent only fetches elements on demand.</p>
+ <!-- Note how this does NOT happen when the base URL changes. -->
+
+ <p>Fetching the image must <span>delay the <code
+ title="event-load">load</code> event</span>.</p>
+
+ <p class="warning">This, unfortunately, can be used to perform a
+ rudimentary port scan of the user's local network (especially in
+ conjunction with scripting, though scripting isn't actually
+ necessary to carry out such an attack). User agents may implement
+ <span title="origin">cross-origin</span> access control policies
+ that mitigate this attack.</p>
+
+ <p>Once the resource has been fetched, if the image is a valid
+ image, the user agent must <span>fire a <code
+ title="event-load">load</code> event</span> on the <code>img</code>
+ element (this happens after <code
+ title="dom-img-complete">complete</code> starts returning true). If
+ the download fails or it completes but the image is not a valid or
+ supported image, the user agent must <span>fire an <code
+ title="event-error">error</code> event</span> on the
+ <code>img</code> element.</p>
+
+ <p>The remote server's response metadata (e.g. an HTTP 404 status
+ code, or <span title="Content-Type">associated Content-Type
+ headers</span>) must be ignored when determining whether the
+ resource obtained is a valid image or not.</p>
+
+ <p class="note">This allows servers to return images with error
+ responses.</p>
+
+ <p>User agents must not support non-image resources with the
+ <code>img</code> element.</p>
+
+ <hr>
+
+ <p>The <code title="attr-hyperlink-usemap">usemap</code> attribute,
+ if present, can indicate that the image has an associated
+ <span>image map</span>.</p>
+
+ <p>The <dfn title="attr-img-ismap"><code>ismap</code></dfn>
+ attribute, when used on an element that is a descendant of an
+ <code>a</code> element with an <code
+ title="attr-hyperlink-href">href</code> attribute, indicates by its
+ presence that the element provides access to a server-side image
+ map. This affects how events are handled on the corresponding
+ <code>a</code> element.</p>
+
+ <p>The <code title="attr-img-ismap">ismap</code> attribute is a
+ <span>boolean attribute</span>. The attribute must not be specified
+ on an element that does not have an ancestor <code>a</code> element
+ with an <code title="attr-hyperlink-href">href</code> attribute.</p>
+
+ <p>The <code>img</code> element supports <span>dimension
+ attributes</span>.</p>
+
+ <!-- XXX contents of <img> should be ignored for rendering but not
+ for semantics, e.g. <script>, <input>, etc. -->
+
+ <p>The DOM attributes <dfn
+ title="dom-img-alt"><code>alt</code></dfn>, <dfn
+ title="dom-img-src"><code>src</code></dfn>, <dfn
+ title="dom-img-useMap"><code>useMap</code></dfn>, and <dfn
+ title="dom-img-isMap"><code>isMap</code></dfn> each must
+ <span>reflect</span> the respective content attributes of the same
+ name.</p>
+
+ <p>The DOM attributes <dfn
+ title="dom-img-width"><code>width</code></dfn> and <dfn
+ title="dom-img-height"><code>height</code></dfn> must return the
+ rendered width and height of the image, in CSS pixels, if the image
+ is being rendered, and is being rendered to a visual medium; or else
+ the intrinsic with and height of the image, in CSS pixels, if the
+ image is available but not being rendered to a visual medium; or
+ else 0, if the image is not available or its dimensions are not
+ known. <a href="#refsCSS21">[CSS21]</a></p>
+
+ <p>The DOM attribute <dfn
+ title="dom-img-complete"><code>complete</code></dfn> must return
+ true if the user agent has downloaded the image specified in the
+ <code title="attr-img-src">src</code> attribute, and it is a valid
+ image, and false otherwise.</p>
+
+ <p class="note">The value of <code
+ title="dom-img-complete">complete</code> can change while a script
+ is executing.</p>
+
+ <p>Three constructors are provided for creating
+ <code>HTMLImageElement</code> objects (in addition to the factory
+ methods from DOM Core such as <code
+ title="">createElement()</code>): <dfn
+ title="dom-image"><code>Image()</code></dfn>, <dfn
+ title="dom-image-w"><code>Image(<var
+ title="">width</var>)</code></dfn>, and <dfn
+ title="dom-image-wh"><code>Image(<var title="">width</var>, <var
+ title="">height</var>)</code></dfn>. When invoked as constructors,
+ these must return a new <code>HTMLImageElement</code> object (a new
+ <code>img</code> element). If the <var title="">width</var> argument
+ is present, the new object's <code
+ title="attr-img-width">width</code> content attribute must be set to
+ <var title="">width</var>. If the <var title="">height</var>
+ argument is also present, the new object's <code
+ title="attr-img-height">height</code> content attribute must be set
+ to <var title="">height</var>.</p>
+
+
+ <div class="example">
+
+ <p>A single image can have different appropriate alternative text
+ depending on the context.</p>
+
+ <p>In each of the following cases, the same image is used, yet the
+ <code title="attr-img-alt">alt</code> text is different each
+ time. The image is the coat of arms of the Canton Geneva in
+ Switzerland.</p>
+
+ <p>Here it is used as a supplementary icon:</p>
+ <pre><p>I lived in <img src="carouge.svg" alt=""> Carouge.</p></pre>
+
+ <p>Here it is used as an icon representing the town:</p>
+ <pre><p>Home town: <img src="carouge.svg" alt="Carouge"></p></pre>
+
+ <p>Here it is used as part of a text on the town:</p>
+
+ <pre><p>Carouge has a coat of arms.</p>
+<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
+<p>It is used as decoration all over the town.</p></pre>
+
+ <p>Here it is used as a way to support a similar text where the
+ description is given as well as, instead of as an alternative to,
+ the image:</p>
+
+ <pre><p>Carouge has a coat of arms.</p>
+<p><img src="carouge.svg" alt=""></p>
+<p>The coat of arms depicts a lion, sitting in front of a tree.
+It is used as decoration all over the town.</p></pre>
+
+ <p>Here it is used as part of a story:</p>
+
+ <pre><p>He picked up the folder and a piece of paper fell out.</p>
+<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
+red background, a green tree, and a yellow lion with its tongue
+hanging out and whose tail was shaped like an S."></p>
+<p>He stared at the folder. S! The answer he had been looking for all
+this time was simply the letter S! How had he not seen that before? It all
+came together now. The phone call where Hector had referred to a lion's tail,
+the time Marco had stuck his tongue out...</p></pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>Here are some more examples showing the same picture used in
+ different contexts, with different appropriate alternate texts each
+ time.</p>
+
+ <pre><article>
+ <h1>My cats</h1>
+ <h2>Fluffy</h2>
+ <p>Fluffy is my favourite.</p>
+ <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
+ <p>She's just too cute.</p>
+ <h2>Miles</h2>
+ <p>My other cat, Miles just eats and sleeps.</p>
+</article></pre>
+
+ <pre><article>
+ <h1>Photography</h1>
+ <h2>Shooting moving targets indoors</h2>
+ <p>The trick here is to know how to anticipate; to know at what speed and
+ what distance the subject will pass by.</p>
+ <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
+ photographed quite nicely using this technique.">
+ <h2>Nature by night</h2>
+ <p>To achieve this, you'll need either an extremely sensitive film, or
+ immense flash lights.</p>
+</article></pre>
+
+ <pre><article>
+ <h1>About me</h1>
+ <h2>My pets</h2>
+ <p>I've got a cat named Fluffy and a dog named Miles.</p>
+ <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
+ <p>My dog Miles and I like go on long walks together.</p>
+ <h2>music</h2>
+ <p>After our walks, having emptied my mind, I like listening to Bach.</p>
+</article></pre>
+
+ <pre><article>
+ <h1>Fluffy and the Yarn</h1>
+ <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
+ <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
+ <p>He would play in the morning, he would play in the evening.</p>
+</article></pre>
+
+ </div>
+
+
+ <h5 id="alt">Requirements for providing text to act as an alternative for images</h5>
+
<p>The requirements for the <code title="attr-img-alt">alt</code>
attribute depend on what the image is intended to represent:</p>
@@ -13415,254 +13667,9 @@
</dl>
- <p>The <code>img</code> must not be used as a layout tool. In
- particular, <code>img</code> elements should not be used to display
- fully transparent images, as they rarely convey meaning and rarely
- add anything useful to the document.</p>
- <p class="big-issue">There has been some suggestion that the <code
- title="">longdesc</code> attribute from HTML4, or some other
- mechanism that is more powerful than <code title="">alt=""</code>,
- should be included. This has not yet been considered.</p>
- <hr>
- <p><strong>User agent requirements</strong>: When the <code
- title="attr-img-alt">alt</code> attribute is present and its value
- is the empty string, the image supplements the surrounding
- content. In such cases, the image may be omitted without affecting
- the meaning of the document.</p>
-
- <p>When the <code title="attr-img-alt">alt</code> attribute is
- present and its value is not the empty string, the image is a
- graphical equivalent of the string given in the <code
- title="attr-img-alt">alt</code> attribute. In such cases, the image
- may be replaced in the rendering by the string given in the
- attribute without significantly affecting the meaning of the
- document.</p>
-
- <p>When the <code title="attr-img-alt">alt</code> attribute is
- missing, the image represents a key part of the content. Non-visual
- user agents should apply image analysis heuristics to help the user
- make sense of the image.</p>
-
- <p>The <code title="attr-img-alt">alt</code> attribute does not
- represent advisory information. User agents must not present the
- contents of the <code title="attr-img-alt">alt</code> attribute in
- the same way as content of the <code title="attr-title">title</code>
- attribute.</p>
-
- <p>If the <code title="attr-img-src">src</code> attribute is
- omitted, the image represents whatever string is given by the
- element's <code title="attr-img-alt">alt</code> attribute, if any,
- or nothing, if that attribute is empty or absent.</p>
-
- <hr>
-
- <p>When an <code>img</code> is created with a <code
- title="attr-img-src">src</code> attribute, and whenever the <code
- title="attr-img-src">src</code> attribute is set subsequently, the
- user agent must fetch the resource specifed by the <code
- title="attr-img-src">src</code> attribute's value, unless the user
- agent cannot support images, or its support for images has been
- disabled, or the user agent only fetches elements on demand.</p>
- <!-- Note how this does NOT happen when the base URL changes. -->
-
- <p>Fetching the image must <span>delay the <code
- title="event-load">load</code> event</span>.</p>
-
- <p class="warning">This, unfortunately, can be used to perform a
- rudimentary port scan of the user's local network (especially in
- conjunction with scripting, though scripting isn't actually
- necessary to carry out such an attack). User agents may implement
- <span title="origin">cross-origin</span> access control policies
- that mitigate this attack.</p>
-
- <p>Once the resource has been fetched, if the image is a valid
- image, the user agent must <span>fire a <code
- title="event-load">load</code> event</span> on the <code>img</code>
- element (this happens after <code
- title="dom-img-complete">complete</code> starts returning true). If
- the download fails or it completes but the image is not a valid or
- supported image, the user agent must <span>fire an <code
- title="event-error">error</code> event</span> on the
- <code>img</code> element.</p>
-
- <p>The remote server's response metadata (e.g. an HTTP 404 status
- code, or <span title="Content-Type">associated Content-Type
- headers</span>) must be ignored when determining whether the
- resource obtained is a valid image or not.</p>
-
- <p class="note">This allows servers to return images with error
- responses.</p>
-
- <p>User agents must not support non-image resources with the
- <code>img</code> element.</p>
-
- <hr>
-
- <p>The <code title="attr-hyperlink-usemap">usemap</code> attribute,
- if present, can indicate that the image has an associated
- <span>image map</span>.</p>
-
- <p>The <dfn title="attr-img-ismap"><code>ismap</code></dfn>
- attribute, when used on an element that is a descendant of an
- <code>a</code> element with an <code
- title="attr-hyperlink-href">href</code> attribute, indicates by its
- presence that the element provides access to a server-side image
- map. This affects how events are handled on the corresponding
- <code>a</code> element.</p>
-
- <p>The <code title="attr-img-ismap">ismap</code> attribute is a
- <span>boolean attribute</span>. The attribute must not be specified
- on an element that does not have an ancestor <code>a</code> element
- with an <code title="attr-hyperlink-href">href</code> attribute.</p>
-
- <p>The <code>img</code> element supports <span>dimension
- attributes</span>.</p>
-
- <!-- XXX contents of <img> should be ignored for rendering but not
- for semantics, e.g. <script>, <input>, etc. -->
-
- <p>The DOM attributes <dfn
- title="dom-img-alt"><code>alt</code></dfn>, <dfn
- title="dom-img-src"><code>src</code></dfn>, <dfn
- title="dom-img-useMap"><code>useMap</code></dfn>, and <dfn
- title="dom-img-isMap"><code>isMap</code></dfn> each must
- <span>reflect</span> the respective content attributes of the same
- name.</p>
-
- <p>The DOM attributes <dfn
- title="dom-img-width"><code>width</code></dfn> and <dfn
- title="dom-img-height"><code>height</code></dfn> must return the
- rendered width and height of the image, in CSS pixels, if the image
- is being rendered, and is being rendered to a visual medium; or else
- the intrinsic with and height of the image, in CSS pixels, if the
- image is available but not being rendered to a visual medium; or
- else 0, if the image is not available or its dimensions are not
- known. <a href="#refsCSS21">[CSS21]</a></p>
-
- <p>The DOM attribute <dfn
- title="dom-img-complete"><code>complete</code></dfn> must return
- true if the user agent has downloaded the image specified in the
- <code title="attr-img-src">src</code> attribute, and it is a valid
- image, and false otherwise.</p>
-
- <p class="note">The value of <code
- title="dom-img-complete">complete</code> can change while a script
- is executing.</p>
-
- <p>Three constructors are provided for creating
- <code>HTMLImageElement</code> objects (in addition to the factory
- methods from DOM Core such as <code
- title="">createElement()</code>): <dfn
- title="dom-image"><code>Image()</code></dfn>, <dfn
- title="dom-image-w"><code>Image(<var
- title="">width</var>)</code></dfn>, and <dfn
- title="dom-image-wh"><code>Image(<var title="">width</var>, <var
- title="">height</var>)</code></dfn>. When invoked as constructors,
- these must return a new <code>HTMLImageElement</code> object (a new
- <code>img</code> element). If the <var title="">width</var> argument
- is present, the new object's <code
- title="attr-img-width">width</code> content attribute must be set to
- <var title="">width</var>. If the <var title="">height</var>
- argument is also present, the new object's <code
- title="attr-img-height">height</code> content attribute must be set
- to <var title="">height</var>.</p>
-
-
- <div class="example">
-
- <p>A single image can have different appropriate alternative text
- depending on the context.</p>
-
- <p>In each of the following cases, the same image is used, yet the
- <code title="attr-img-alt">alt</code> text is different each
- time. The image is the coat of arms of the Canton Geneva in
- Switzerland.</p>
-
- <p>Here it is used as a supplementary icon:</p>
- <pre><p>I lived in <img src="carouge.svg" alt=""> Carouge.</p></pre>
-
- <p>Here it is used as an icon representing the town:</p>
- <pre><p>Home town: <img src="carouge.svg" alt="Carouge"></p></pre>
-
- <p>Here it is used as part of a text on the town:</p>
-
- <pre><p>Carouge has a coat of arms.</p>
-<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
-<p>It is used as decoration all over the town.</p></pre>
-
- <p>Here it is used as a way to support a similar text where the
- description is given as well as, instead of as an alternative to,
- the image:</p>
-
- <pre><p>Carouge has a coat of arms.</p>
-<p><img src="carouge.svg" alt=""></p>
-<p>The coat of arms depicts a lion, sitting in front of a tree.
-It is used as decoration all over the town.</p></pre>
-
- <p>Here it is used as part of a story:</p>
-
- <pre><p>He picked up the folder and a piece of paper fell out.</p>
-<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
-red background, a green tree, and a yellow lion with its tongue
-hanging out and whose tail was shaped like an S."></p>
-<p>He stared at the folder. S! The answer he had been looking for all
-this time was simply the letter S! How had he not seen that before? It all
-came together now. The phone call where Hector had referred to a lion's tail,
-the time Marco had stuck his tongue out...</p></pre>
-
- </div>
-
- <div class="example">
-
- <p>Here are some more examples showing the same picture used in
- different contexts, with different appropriate alternate texts each
- time.</p>
-
- <pre><article>
- <h1>My cats</h1>
- <h2>Fluffy</h2>
- <p>Fluffy is my favourite.</p>
- <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
- <p>She's just too cute.</p>
- <h2>Miles</h2>
- <p>My other cat, Miles just eats and sleeps.</p>
-</article></pre>
-
- <pre><article>
- <h1>Photography</h1>
- <h2>Shooting moving targets indoors</h2>
- <p>The trick here is to know how to anticipate; to know at what speed and
- what distance the subject will pass by.</p>
- <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
- photographed quite nicely using this technique.">
- <h2>Nature by night</h2>
- <p>To achieve this, you'll need either an extremely sensitive film, or
- immense flash lights.</p>
-</article></pre>
-
- <pre><article>
- <h1>About me</h1>
- <h2>My pets</h2>
- <p>I've got a cat named Fluffy and a dog named Miles.</p>
- <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
- <p>My dog Miles and I like go on long walks together.</p>
- <h2>music</h2>
- <p>After our walks, having emptied my mind, I like listening to Bach.</p>
-</article></pre>
-
- <pre><article>
- <h1>Fluffy and the Yarn</h1>
- <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
- <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
- <p>He would play in the morning, he would play in the evening.</p>
-</article></pre>
-
- </div>
-
-
<h4>The <dfn><code>iframe</code></dfn> element</h4>
<dl class="element">
More information about the Commit-Watchers
mailing list