Short URL: http://html5.org/r/1000
Index: source
===================================================================
--- source (revision 999)
+++ source (revision 1000)
@@ -6980,7 +6980,7 @@
collection of all the information given by those elements.</p>
<p class="note">Contact information for one sectioning element, e.g.
- a <code>aside</code> element, does not apply to its ancestor
+ an <code>aside</code> element, does not apply to its ancestor
elements, e.g. the page's <code>body</code>.</p>
@@ -9947,7 +9947,7 @@
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Element-specific attributes:</dt>
- <dd><code title="attr-img-alt">alt</code> (required)</dd>
+ <dd><code title="attr-img-alt">alt</code></dd>
<dd><code title="attr-img-src">src</code> (required)</dd>
<dd><code title="attr-hyperlink-usemap">usemap</code></dd>
<dd><code title="attr-img-ismap">ismap</code> (but only if one of the ancestor elements is an <code>a</code> element)</dd>
@@ -9970,42 +9970,365 @@
</dd>
</dl>
- <p>The <code>img</code> element represents a piece of text with an
- alternate graphical representation. The text is given by the <dfn
- title="attr-img-alt"><code>alt</code></dfn> attribute, which must be
- present, and the URI to the graphical representation of that text is
- given in the <dfn title="attr-img-src"><code>src</code></dfn>
- attribute, which must also be present.</p>
+ <p>An <code>img</code> element represents an image.</p>
- <p>The image given by the <code title="attr-img-src">src</code>
- attribute is the embedded content, and the value of the <code
- title="attr-img-alt">alt</code> attribute is the <code>img</code>
- element's <span>fallback content</span>.</p>
+ <p>The image given by the <dfn
+ title="attr-img-src"><code>src</code></dfn> attribute is the
+ embedded content, and the value of the <dfn
+ title="attr-img-alt"><code>alt</code></dfn> attribute is the
+ <code>img</code> element's <span>fallback content</span>.</p>
- <p>When the <code title="attr-img-alt">alt</code> attribute's value
+ <p><strong>Authoring requirements</strong>: The <code
+ title="attr-img-src">src</code> attribute must be present, and must
+ contain a URI (or IRI). The requirements for the <code
+ title="attr-img-alt">alt</code> attribute depend on what the image
+ is intended to represent:</p>
+
+ <dl>
+
+ <dt>A phrase or paragraph with an alternative graphical representation</dt>
+
+ <dd>
+
+ <p>Sometimes something can be more clearly stated in graphical
+ form, for example as a flowchart, a diagram, a graph, or a simple
+ map showing directions. In such cases, an image can be given using
+ the <code>img</code> element, but the lesser textual version must
+ still be given, so that users who are unable to view the image
+ (e.g. because 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) are still able to
+ understand the message being conveyed.</p>
+
+ <p>The text must be given in the <code
+ title="attr-img-alt">alt</code> attribute, and must convey the
+ same message as the the image specified in the <code
+ title="attr-img-src">src</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">alt</code>
+ attribute rephrasing the flowchart in prose form:</p>
+
+ <pre><p>In the common case, the data handled by the tokenisation stage
+comes from the network, but it can also come from script.</p>
+<p><strong><img src="images/parsing-model-overview.png" alt="The network
+passes data to the Tokeniser stage, which passes data to the Tree
+Construction stage. From there, data goes to both the DOM and to
+Script Execution. Script Execution is linked to the DOM, and, using
+document.write(), passes data to the Tokeniser."></strong></p></pre>
+
+ </div>
+
+ <p>It is important to realise that the alternative text is a
+ <em>replacement</em> for the image, not a description of the
+ image.</p>
+
+ </dd>
+
+
+ <dt>Icons: a short phrase or label with an alternative graphical representation</dt>
+
+ <dd>
+
+ <p>A document can contain information in iconic form. The icon is
+ intended to help users of visual browsers to recognise features at
+ a glance.</p>
+
+ <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">alt</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">alt</code>
+ attribute:</p>
+
+ <pre><nav>
+ <p><a href="/help/"><strong><img src="/icons/help.png" alt=""></strong> Help</a></p>
+ <p><a href="/configure/"><strong><img src="/icons/configuration.png" alt=""></strong>
+ Configuration Tools</a></p>
+</nav></pre>
+
+ </div>
+
+ <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">alt</code> attribute.</p>
+
+ <div class="example">
+
+ <p>Here, posts on a news site are labelled with an icon
+ indicating their topic.</p>
+
+ <pre><body>
+ <article>
+ <header>
+ <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
+ <p><strong><img src="movies.png" alt="Movies"></strong></p>
+ </header>
+ <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
+ making this its 8th win in the last 12 years.</p>
+ </article>
+ <article>
+ <header>
+ <h1>Latest TWiT episode is online</h1>
+ <p><strong><img src="podcasts.png" alt="Podcasts"></strong></p>
+ </header>
+ <p>The latest TWiT episode has been posted, in which we hear
+ several tech news stories as well as learning much more about the
+ iPhone. This week, the panelists compare how reflective their
+ iPhones' Apple logos are.</p>
+ </article>
+</body></pre>
+
+ </div>
+
+ <p>Many pages include logos, insignia, flags, or emblems, which
+ stand for a particular entity such as a company, organisation,
+ project, band, software package, country, or some such.</p>
+
+ <p>If the logo is being used to represent the entity, the <code
+ title="attr-img-alt">alt</code> attribute must contain the name of
+ the entity being represented by the logo. The <code
+ title="attr-img-alt">alt</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">alt</code> attribute must instead be
+ empty.</p>
+
+ <p>If the logo is merely used as decorative material (as branding,
+ or, for example, as a side image in an article that mentions the
+ entity to which the logo belongs), then the entry below on purely
+ decorative images applies. If the logo is actually being
+ discussed, then it is being used as a phrase or paragraph (the
+ description of the logo) with an alternative graphical
+ representation (the logo itself), and the first entry above
+ applies.</p>
+
+ <div class="example">
+
+ <p>In the following snippets, all four of the above cases are
+ present. First, we see a logo used to represent a company:</p>
+
+ <pre><h1><strong><img src="XYZ.gif" alt="The XYZ company"></strong></h1></pre>
+
+ <p>Next, we see a paragraph which uses a logo right next to the
+ company name, and so doesn't have any alternative text:
+
+ <pre><article>
+ <h2>News</h2>
+ <p>We have recently been looking at buying the <strong><img src="alpha.gif"
+ alt=""> ΑΒΓ company</strong>, a small greek company
+ specialising in our type of product.</p></pre>
+
+ <p>In this third snippet, we have a logo being used in an aside,
+ as part of the larger article discussing the aquisition:</p>
+
+<pre> <strong><aside><p><img src="alpha-large.gif" alt=""></p></aside></strong>
+ <p>The ΑΒΓ company has had a good quarter, and our
+ pie chart studies of their accounts suggest a much bigger blue slice
+ than its green and orange slices, which is always a good sign.</p>
+</article></pre>
+
+ <p>Finally, we have an opinion piece talking about a logo, and
+ the logo is therefore described in detail in the alternative
+ text.</p>
+
+ <pre><p>Consider for a moment their logo:</p>
+
+<strong><p><img src="/images/logo" alt="It consists of a green circle with a
+green question mark centered inside it."></p></strong>
+
+<p>How unoriginal can you get? I mean, oooooh, a question mark, how
+<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
+sure everyone will rush to adopt those specifications now! They could
+at least have tried for some sort of, I don't know, sequence of
+rounded squares with varying shades of green and bold white outlines,
+at least that would look good on the cover of a blue book.</p></pre>
+
+ <p>This example shows how the alternative text should be written
+ such that if the image isn't available, and the text is used
+ instead, the text flows seamlessly into the surrounding text, as
+ if the image had never been there in the first place.</p>
+
+ </div>
+
+ </dd>
+
+
+ <dt>A graphical representation of some of the surrounding text</dt>
+
+ <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">alt</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>
+
+ <pre><p>The network passes data to the Tokeniser stage, which
+passes data to the Tree Construction stage. From there, data goes
+to both the DOM and to Script Execution. Script Execution is
+linked to the DOM, and, using document.write(), passes data to
+the Tokeniser.</p>
+<strong><p><img src="images/parsing-model-overview.png" alt=""></p></strong></pre>
+
+ </div>
+
+ <div class="example">
+
+ <p>A graph that repeats the previous paragraph in graphical form:</p>
+
+ <pre><p>According to a study covering several billion pages,
+about 62% of documents on the Web in 2007 triggered the Quirks
+rendering mode of Web browsers, about 30% triggered the Almost
+Standards mode, and about 9% triggered the Standadrs mode.</p>
+<strong><p><img src="rendering-mode-pie-chart.png" alt=""></p></strong></pre>
+
+ </div>
+
+ <p>In general, an image falls into this category if removing the
+ image doesn't make the page any less useful, but if the image
+ makes it a lot easier for users of visual browsers to understand
+ the concept.</p>
+
+ </dd>
+
+
+ <dt>A purely decorative image that doesn't add any information but is still specific to the surrounding content</dt>
+
+ <dd>
+
+ <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">alt</code> attribute must be present but its
+ value must be the empty string.
+
+ <div class="example">
+
+ <p>Examples where the image is purely decorative despite being
+ relevant would include things like a photo of the Black Rock City
+ landscape in a blog post about an event at Burning Man, or an
+ image of a painting inspired by a poem, on a page reciting that
+ poem. The following snippet shows an example of the latter
+ case (only the first verse is included in this snippet):</p>
+
+ <pre><h1>The Lady of Shalott</h1>
+<strong><p><img src="shallot.jpeg" alt=""></p></strong>
+<p>On either side the river lie<br>
+Long fields of barley and of rye,<br>
+That clothe the wold and meet the sky;<br>
+And through the field the road run by<br>
+To many-tower'd Camelot;<br>
+And up and down the people go,<br>
+Gazing where the lilies blow<br>
+Round an island there below,<br>
+The island of Shalott.</p></pre>
+
+ </div>
+
+ <p>In general, if an image is decorative but isn't especially
+ page-specific, for example an image that forms part of a site-wide
+ design scheme, the image should be specified in the site's CSS,
+ not in the markup of the document.</p>
+
+ </dd>
+
+
+ <dt>A key part of the content that has no textual alternative</dt>
+
+ <dd>
+
+ <p>In certain rare cases, the image is simply a critical part of
+ the content, and there is no alternative text available. This
+ could be the case, for instance, in a photo gallery, where a user
+ has uploaded 3000 photos from a vacation trip, without providing
+ any descriptions of the images. The images are the whole
+ <em>point</em> of the pages containing them.</p>
+
+ <p>In such cases, the <code title="attr-img-alt">alt</code>
+ attribute must be omitted.</p>
+
+ <div class="example">
+
+ <p>A photo on a photo-sharing site:</p>
+
+ <pre><figure>
+ <strong><img src="1100670787_6a7c664aef.jpg"></strong>
+ <legend>Bubbles traveled everywhere with us.</legend>
+</figure></pre>
+
+ <p>A screenshot in a gallery of screenshots for a new OS:</p>
+
+ <pre><figure>
+ <strong><img src="KDE%20Light%20desktop.png"></strong>
+ <legend>Screenshot of a KDE desktop.</legend>
+</figure></pre>
+
+ </div>
+
+ <p>Since some users cannot use images at all (e.g. because 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), this technique should only be used when no
+ alternative text is available and none can be made available,
+ e.g. on automated image gallery sites.</p>
+
+ </dd>
+
+
+ </dl>
+
+ <!-- XXX see also http://www.cs.tut.fi/~jkorpela/html/alt.html -->
+
+
+ <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 could be omitted without affecting
+ content. In such cases, the image may be omitted without affecting
the meaning of the document.</p>
- <p>If the <code title="attr-img-alt">alt</code> attribute is
- omitted, user agents must treat the element as if it had an <code
- title="attr-img-alt">alt</code> attribute set to the empty
- string.</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 class="big-issue">Guidelines on writing "alt" text here.</p>
- <!-- http://www.cs.tut.fi/~jkorpela/html/alt.html -->
- <p>The <code title="attr-img-src">src</code> attribute must contain
- a URI (or IRI). If the <code title="attr-img-src">src</code>
- attribute is omitted, there is no alternative image
- representation.</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>
+
<p>When the <code title="attr-img-src">src</code> attribute is set,
the user agent must immediately begin to download the specified
resource<!-- XXX xref what fetching means, how to resolve URIs in
@@ -10016,6 +10339,12 @@
<p>The download of 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
+ cross-origin access control policies that mitigate this attack.</p>
+
<p>Once the download has completed, 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>
@@ -10035,6 +10364,7 @@
<p>User agents must not support non-image resources with the
<code>img</code> element.</p>
+
<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>
@@ -23126,7 +23456,8 @@
resource (in lowercase<!-- XXX ASCII case folding -->, ignoring any
parameters). If there is no such type, jump to the <em
title="content-type sniffing: unknown type">unknown type</em> step
- below.</p></li>
+ below.</p> <p class="big-issue">...or if the type has no slash or
+ is */*? Probably we should also sniff in that case.</p></li>
<li><p>If <var title="">official type</var> ends in "+xml", or if
it is either "text/xml" or "application/xml", then the the sniffed
@@ -23832,7 +24163,13 @@
the string representing the script's domain in IDNA format cannot be
obtained. (ToUnicode is defined to never fail.)</p>
+ <p class="big-issue">It's been suggested that we should put IP
+ addresses into the origin tuple, to mitigate DNS rebinding
+ attacks. However that would kill multi-homed systems like
+ GMail. Should we do something like have a DNS record say whether or
+ not to include the IP in the origin for a host?</p>
+
<h4>Security exceptions</h4>
<p class="big-issue">Define <dfn>security exception</dfn>.</p>
@@ -36034,7 +36371,11 @@
<!-- XXX make sure things "delay the load event" -->
+ <p class="big-issue">delaying the load event for things like image
+ loads allows for intranet port scans (even without
+ javascript!). Should we really encode that into the spec?</p>
+
<!--XXX need to handle
http://lxr.mozilla.org/mozilla/source/parser/htmlparser/src/CNavDTD.cpp#2354
2354 // Don't open transient styles if it makes the stack deep, bug 58917.