[html5] r1000 - /
whatwg at whatwg.org
whatwg at whatwg.org
Tue Aug 14 02:18:30 PDT 2007
Author: ianh
Date: 2007-08-14 02:18:28 -0700 (Tue, 14 Aug 2007)
New Revision: 1000
Modified:
index
source
Log:
[ac] (1) Revamp of the <img alt> rules. Also, some editorial notes on Content-Type handling, on the port-scanning issue with <img>/onload, and on a proposal to make the origin tuple include the IP address to avoid DNS rebinding attacks. And a typo fix.
Modified: index
===================================================================
--- index 2007-08-10 21:48:46 UTC (rev 999)
+++ index 2007-08-14 09:18:28 UTC (rev 1000)
@@ -22,7 +22,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=working>Working Draft — 10 August 2007</h2>
+ <h2 class="no-num no-toc" id=working>Working Draft — 14 August 2007</h2>
<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
@@ -8546,7 +8546,7 @@
ancestor sectioning elements. The contact information is the collection of
all the information given by those elements.
- <p class=note>Contact information for one sectioning element, e.g. a
+ <p class=note>Contact information for one sectioning element, e.g. an
<code><a href="#aside">aside</a></code> element, does not apply to its
ancestor elements, e.g. the page's <code><a href="#body0">body</a></code>.
@@ -11958,7 +11958,7 @@
<dt>Element-specific attributes:
- <dd><code title=attr-img-alt><a href="#alt">alt</a></code> (required)
+ <dd><code title=attr-img-alt><a href="#alt">alt</a></code>
<dd><code title=attr-img-src><a href="#src">src</a></code> (required)
@@ -11992,28 +11992,306 @@
constructor.</p>
</dl>
- <p>The <code><a href="#img">img</a></code> element represents a piece of
- text with an alternate graphical representation. The text is given by the
- <dfn id=alt 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 id=src title=attr-img-src><code>src</code></dfn>
- attribute, which must also be present.
+ <p>An <code><a href="#img">img</a></code> element represents an image.
- <p>The image given by the <code title=attr-img-src><a
- href="#src">src</a></code> attribute is the embedded content, and the
- value of the <code title=attr-img-alt><a href="#alt">alt</a></code>
- attribute is the <code><a href="#img">img</a></code> element's <a
- href="#fallback">fallback content</a>.
+ <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
+ 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
+ URI (or IRI). The requirements for the <code title=attr-img-alt><a
+ href="#alt">alt</a></code> attribute depend on what the image is intended
+ to represent:
+
+ <dl>
+ <dt>A phrase or paragraph with an alternative graphical representation
+
+ <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><a
+ href="#img">img</a></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><a
+ href="#alt">alt</a></code> attribute, and must convey the same message
+ as the 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>
+
+ <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>
+
+ <dt>Icons: a short phrase or label with an alternative graphical
+ representation
+
+ <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><a
+ href="#alt">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>
+
+ <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><a href="#alt">alt</a></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><a href="#alt">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
+ <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
+ 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>
+
+ <dt>A graphical representation of some of the surrounding text
+
+ <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>
+
+ <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>
+
+ <dt>A purely decorative image that doesn't add any information but is
+ still specific to the surrounding content
+
+ <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><a
+ href="#alt">alt</a></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>
+
+ <dt>A key part of the content that has no textual alternative
+
+ <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><a
+ href="#alt">alt</a></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>
+ </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><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's value is the empty string, the image supplements the
- surrounding content. In such cases, the image could be omitted without
- affecting the meaning of the document.
+ 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>If the <code title=attr-img-alt><a href="#alt">alt</a></code> attribute
- is omitted, user agents must treat the element as if it had an <code
- title=attr-img-alt><a href="#alt">alt</a></code> attribute set to the
- empty string.
+ <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
@@ -12021,14 +12299,11 @@
attribute in the same way as content of the <code title=attr-title><a
href="#title">title</a></code> attribute.
- <p class=big-issue>Guidelines on writing "alt" text here.</p>
- <!-- http://www.cs.tut.fi/~jkorpela/html/alt.html -->
+ <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.
- <p>The <code title=attr-img-src><a href="#src">src</a></code> attribute
- must contain a URI (or IRI). If the <code title=attr-img-src><a
- href="#src">src</a></code> attribute is omitted, there is no alternative
- image representation.
-
<p>When the <code title=attr-img-src><a href="#src">src</a></code>
attribute is set, the user agent must immediately begin to download the
specified
@@ -12040,6 +12315,12 @@
<p>The download of 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 cross-origin access control policies
+ that mitigate this attack.
+
<p>Once the download has completed, 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. If the
@@ -25655,8 +25936,11 @@
the 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"><a
- href="#content-type5">unknown type</a></em> step below.
+ href="#content-type5">unknown type</a></em> step below.</p>
+ <p class=big-issue>...or if the type has no slash or is */*? Probably we
+ should also sniff in that case.
+
<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 type of the
@@ -26412,6 +26696,11 @@
the script's domain in IDNA format cannot be obtained. (ToUnicode is
defined to never fail.)
+ <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?
+
<h4 id=security3><span class=secno>4.9.3. </span>Security exceptions</h4>
<p class=big-issue>Define <dfn id=security8>security exception</dfn>.
@@ -38773,6 +39062,10 @@
title="fire a load event">fire a <code title=event-load>load</code>
event</a> at <a href="#the-body0">the <code>body</code> element</a>.</p>
<!-- 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.
Modified: source
===================================================================
--- source 2007-08-10 21:48:46 UTC (rev 999)
+++ source 2007-08-14 09:18:28 UTC (rev 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.
More information about the Commit-Watchers
mailing list