- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 26 Aug 2008 08:19:28 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv10415
Modified Files:
Overview.html
Log Message:
Address all recent alt='' feedback. For further details see: http://lists.w3.org/Archives/Public/public-html/2008Aug/0759.html (whatwg r2115)
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.1287
retrieving revision 1.1288
diff -u -d -r1.1287 -r1.1288
--- Overview.html 25 Aug 2008 10:03:37 -0000 1.1287
+++ Overview.html 26 Aug 2008 08:19:25 -0000 1.1288
@@ -27,7 +27,7 @@
for HTML and XHTML</h2>
<h2 class="no-num no-toc" id=editors0><!-- "W3C Working Draft" -->
- Editor's Draft <!--ZZZ-->25 August 2008</h2>
+ Editor's Draft <!--ZZZ-->26 August 2008</h2>
<dl><!-- ZZZ: update the month/day
<dt>This Version:</dt>
@@ -199,7 +199,7 @@
<p>The W3C <a href="http://www.w3.org/html/wg/">HTML Working Group</a> is
the W3C working group responsible for this specification's progress along
- the W3C Recommendation track. <!--ZZZ:--> This specification is the 25
+ the W3C Recommendation track. <!--ZZZ:--> This specification is the 26
August 2008 <!--ZZZ "Working Draft"-->Editor's Draft. <!--:ZZZ--></p>
<!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
<!-- relationship to other work (required) -->
@@ -11943,9 +11943,9 @@
<a href="#outline">outline</a>. Abort these steps.
<li>
- <p>Associate any nodes that were not associated a <a href="#section0"
- title=concept-section>section</a> in the steps above with <var
- title="">current outlinee</var> as their section.
+ <p>Associate any nodes that were not associated with a <a
+ href="#section0" title=concept-section>section</a> in the steps above
+ with <var title="">current outlinee</var> as their section.
<li>
<p>Associate all nodes with the heading of the <a href="#section0"
@@ -16155,36 +16155,7 @@
<dt>If the <code title=attr-img-src><a href="#src">src</a></code>
attribute is set and the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute is set to a string whose first
- character is a U+007B LEFT CURLY BRACKET character ({) and whose last
- character is a U+007D RIGHT CURLY BRACKET character (})
-
- <dd>
- <p>The image is a key part of the content, and there is no textual
- equivalent of the image available. The string consisting of all the
- characters between the first and the last character of the value of the
- <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute gives
- the kind of image (e.g. photo, diagram, user-uploaded image). If that
- value is the empty string (i.e. the attribute is just "<code
- title="">{}</code>"), then even the kind of image being shown is not
- known.</p>
-
- <p>If the image is <i>available</i>, the element represents the image
- specified by the <code title=attr-img-src><a href="#src">src</a></code>
- attribute.</p>
-
- <p>If the image is not <i>available</i> or if the user agent is not
- configured to display the image, then the user agent should display some
- sort of indicator that the image is not being rendered, and, if
- possible, provide to the user the information regarding the kind of
- image that is (as derived from the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute).</p>
-
- <dt>If the <code title=attr-img-src><a href="#src">src</a></code>
- attribute is set and the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute is set to a value that isn't
- matched by the previous two entries (not empty, not "<code
- title="">{...}</code>")
+ href="#alt0">alt</a></code> attribute is set to a value that isn't empty
<dd>
<p>The image is a key part of the content; the <code
@@ -16205,27 +16176,53 @@
href="#alt0">alt</a></code> attribute is not
<dd>
- <p>The image's role in the document is unknown.</p>
+ <p>The image might be a key part of the content, and there is no textual
+ equivalent of the image available.</p>
<p>If the image is <i>available</i>, the element represents the image
specified by the <code title=attr-img-src><a href="#src">src</a></code>
attribute.</p>
<p>If the image is not <i>available</i> or if the user agent is not
- configured to display the image, then the user agent may display some
- sort of indicator that the image is not being rendered.</p>
+ configured to display the image, then the user agent should display some
+ sort of indicator that there is an image that is not being rendered, and
+ may, if requested by the user, or if so configured, or when required to
+ provide contextual information in response to navigation, provide
+ caption information for the image, derived as follows:</p>
- <dt>If the <code title=attr-img-src><a href="#src">src</a></code>
- attribute is not set and the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute is set to a string whose first
- character is a U+007B LEFT CURLY BRACKET character ({) and whose last
- character is a U+007D RIGHT CURLY BRACKET character (})
+ <ol>
+ <li>
+ <p>If the image has a <code title=attr-title><a
+ href="#title">title</a></code> attribute whose value is not the empty
+ string, then the value of that attribute is the caption information;
+ abort these steps.
- <dd>
- <p>The user agent should display some sort of indicator that an image is
- missing, providing to the user the information regarding the kind of
- image that it would be (as derived from the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute).</p>
+ <li>
+ <p>If the image is the child of a <code><a
+ href="#figure">figure</a></code> element that has a child <code><a
+ href="#legend">legend</a></code> element, then the contents of the
+ first such <code><a href="#legend">legend</a></code> element are the
+ caption information; abort these steps.
+ </li>
+ <!-- aria processing goes here -->
+
+ <li>
+ <p>Run the algorithm to create the <a href="#outline">outline</a> for
+ the document.
+
+ <li>
+ <p>If the <code><a href="#img">img</a></code> element did not end up
+ associated with a heading in theoutline, or if there are any other
+ images that are lacking an <code title=attr-img-alt><a
+ href="#alt0">alt</a></code> attribute and that are associated with the
+ same heading in the outline as the <code><a href="#img">img</a></code>
+ element in question, then there is no caption information; abort these
+ steps.
+
+ <li>
+ <p>The caption information is the heading with which the image is
+ associated according to the outline.
+ </ol>
<dt>If the <code title=attr-img-src><a href="#src">src</a></code>
attribute is not set and either the <code title=attr-img-alt><a
@@ -16375,10 +16372,12 @@
<p>Here it is not known at the time of publication what the image will be,
only that it will be a coat of arms of some kind, and thus no replacement
- text can be provided, and instead only the kind of image is provided:</p>
+ text can be provided, and instead only a brief caption for the image is
+ provided, in the <code title=attr-title><a href="#title">title</a></code>
+ attribute:</p>
<pre><p>The last user to have uploaded a coat of arms uploaded this one:</p>
-<p><img src="last-uploaded-coat-of-arms.cgi" alt="{user-uploaded coat of arms}"></p></pre>
+<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p></pre>
<p>Ideally, the author would find a way to provide real replacement text
even in this case, e.g. by asking the previous user. Not providing
@@ -16439,12 +16438,6 @@
href="#alt0">alt</a></code> attribute depend on what the image is intended
to represent, as described in the following sections.
- <p>A general requirement that applies in all cases is that the <code
- title=attr-img-alt><a href="#alt0">alt</a></code> attribute's value must
- not start with a U+007B LEFT CURLY BRACKET character ({) and end with a
- U+007D RIGHT CURLY BRACKET character (}), unless the attribute is giving
- the <em>kind</em> of image rather than replacement text.
-
<h6 id=a-link><span class=secno>4.7.2.1.1. </span>A link or button
containing nothing but the image</h6>
@@ -16736,7 +16729,7 @@
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><img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing model."></strong></p></pre>
<pre><!-- Using <figure> and <legend> -->
@@ -16869,7 +16862,7 @@
<p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</p>
<strong><p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a
- ><img src="fsm-middle.png" alt=""
+ ><img src="fsm-middle.png" alt=""
><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p></strong></pre>
</div>
@@ -16998,30 +16991,48 @@
sharing an image on his blog).</p>
<p>In such cases, the <code title=attr-img-alt><a
- href="#alt0">alt</a></code> attribute's value must be a description of
- the <em>kind</em> of image, surrounded by braces ("{" and "}"), if that
- is known. The kind of image is something along the lines of "photo",
- "diagram", "painting", "user-uploaded image", etc. If even the kind of
- image cannot be determined, then the string <code title="">{}</code>
- must be used.</p>
+ href="#alt0">alt</a></code> attribute's value may be omitted, but one of
+ the following conditions must be met as well:</p>
+
+ <ul>
+ <li>The <code title=attr-title><a href="#title">title</a></code>
+ attribute is present and has a non-empty value.
+
+ <li>The <code><a href="#img">img</a></code> element is in a <code><a
+ href="#figure">figure</a></code> element that contains a <code><a
+ href="#legend">legend</a></code> element that contains content other
+ than <a href="#inter-element">inter-element whitespace</a>.
+
+ <li>The <code><a href="#img">img</a></code> element is the only <code><a
+ href="#img">img</a></code> element without an <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute in its <a
+ href="#section0" title=concept-section>section</a>, and its <a
+ href="#section0" title=concept-section>section</a> has an associated
+ heading.
+ </ul>
<p class=note>Such cases are to be kept to an absolute minimum. If there
is even the slightest possibility of the author having the ability to
- provide real alternative text, then it would not be acceptable to
- provide the "<code title="">{...}</code>"-style value.</p>
+ provide real alternative text, then it would not be acceptable to omit
+ the code title="attr-img-alt">alt attribute.</p>
<div class=example>
<p>A photo on a photo-sharing site, if the site received the image with
no metadata other than the caption:</p>
<pre><figure>
- <strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
+ <strong><img src="1100670787_6a7c664aef.jpg"></strong>
<legend>Bubbles traveled everywhere with us.</legend>
</figure></pre>
- <p>In this case, though, it would be better if a detailed description of
- the important parts of the image obtained from the user and included on
- the page.</p>
+ <p>It could also be marked up like this:</p>
+
+ <pre><h1>Bubbles traveled everywhere with us.</h1>
+ <strong><img src="1100670787_6a7c664aef.jpg"></strong></pre>
+
+ <p>In either case, though, it would be better if a detailed description
+ of the important parts of the image obtained from the user and included
+ on the page.</p>
</div>
<div class=example>
@@ -17033,7 +17044,7 @@
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <strong><img src="photo2.jpeg" alt="{photograph}"></strong>
+ <strong><img src="photo2.jpeg"></strong>
<legend>A photograph taken blindly from my front porch.</legend>
</figure>
</article></pre>
@@ -17060,10 +17071,12 @@
<p>Sometimes the entire point of the image is that a textual description
is not available, and the user is to provide the description. For
instance, the point of a CAPTCHA image is to see if the user can
- literally read the graphic. Here is one way to mark up a CAPTCHA:</p>
+ literally read the graphic. Here is one way to mark up a CAPTCHA (note
+ the <code title=attr-title><a href="#title">title</a></code>
+ attribute):</p>
<pre><p><label>What does this image say?
-<strong><img src="captcha.cgi?id=8934" alt="{captcha}"></strong>
+<strong><img src="captcha.cgi?id=8934" title="CAPTCHA"></strong>
<input type=text name=captcha></label>
(If you cannot see the image, you can use an <a
href="?audio">audio</a> test instead.)</p></pre>
@@ -17078,24 +17091,16 @@
<tr> <th> Images <th> Descriptions
<tbody>
<tr>
- <td> <strong><img src="2421.png" alt="{}"></strong>
+ <td> <strong><img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"></strong>
<td> <input name="alt2421">
<tr>
- <td> <strong><img src="2422.png" alt="{}"></strong>
+ <td> <strong><img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"></strong>
<td> <input name="alt2422">
</table></pre>
- </div>
- <div class=example>
- <p>The values given in the "<code title="">{...}</code>" syntax are
- intended for the user, they are not keywords. So, for instance, in a
- Finnish document, they would be in Finnish. The following snippet shows
- how a photo might be marked up on a Finnish-language photo upload site,
- when the user has not provided any replacement text:</p>
-
- <pre><html lang="fi">
- ...
- <strong><img src="v3525.jpeg" alt="{valokuva}"></strong></pre>
+ <p>Notice that even in this example, as much useful information as
+ possible is still included in the <code title=attr-title><a
+ href="#title">title</a></code> attribute.</p>
</div>
<p class=note>Since some users cannot use images at all (e.g. because
@@ -17103,9 +17108,11 @@
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="#alt0">alt</a></code>
- attribute is only allowed to contain the <em>kind</em> of image rather
- than replacement text when no alternative text is available and none can
- be made available, e.g. on automated image gallery sites.</p>
+ attribute is only allowed to be omitted rather than being provided with
+ replacement text when no alternative text is available and none can be
+ made available, as in the above examples. Lack of effort from the part
+ of the author is not an acceptable reason for omitting the <code
+ title=attr-img-alt><a href="#alt0">alt</a></code> attribute.</p>
</dl>
<h6 id=an-image><span class=secno>4.7.2.1.10. </span>An image not intended
@@ -17153,6 +17160,12 @@
title=attr-title><a href="#title">title</a></code> attribute can be used
for supplemental information.
+ <p class=note>One way to think of alternative text is to think about what
+ how you would read the page containing the image to someone over the
+ phone, without mentioning that there is an image present. Whatever you say
+ instead of the image is typically a good start for writing the alternative
+ text.
+
<h4 id=the-iframe><span class=secno>4.7.3 </span>The <dfn
id=iframe><code>iframe</code></dfn> element</h4>
Received on Tuesday, 26 August 2008 08:20:03 UTC