W3C home > Mailing lists > Public > public-html-commits@w3.org > August 2008

html5/spec Overview.html,1.1287,1.1288

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 26 Aug 2008 08:19:28 +0000
To: public-html-commits@w3.org
Message-Id: <E1KXtlw-0002iH-6a@lionel-hutz.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>&lt;p>The last user to have uploaded a coat of arms uploaded this one:&lt;/p>
-&lt;p>&lt;img src="last-uploaded-coat-of-arms.cgi" alt="{user-uploaded coat of arms}">&lt;/p></pre>
+&lt;p>&lt;img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms.">&lt;/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.&lt;/p>
-<strong>&lt;p>&lt;img src="images/parsing-model-overview.png" alt=""
+&lt;p><strong>&lt;img src="images/parsing-model-overview.png" alt=""
         title="Flowchart representation of the parsing model."></strong>&lt;/p></pre>
 
    <pre>&lt;!-- Using &lt;figure> and &lt;legend> -->
@@ -16869,7 +16862,7 @@
 &lt;p>You come across a flying spaghetti monster. Which side of His
 Noodliness do you wish to reach out for?&lt;/p>
 <strong>&lt;p>&lt;a href="?go=left" >&lt;img src="fsm-left.png"  alt="Left side. ">&lt;/a
-  >&lt;img src="fsm-middle.png"  alt=""
+  >&lt;img src="fsm-middle.png" alt=""
   >&lt;a href="?go=right">&lt;img src="fsm-right.png" alt="Right side.">&lt;/a>&lt;/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>&lt;figure>
- <strong>&lt;img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
+ <strong>&lt;img src="1100670787_6a7c664aef.jpg"></strong>
  &lt;legend>Bubbles traveled everywhere with us.&lt;/legend>
 &lt;/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>&lt;h1>Bubbles traveled everywhere with us.&lt;/h1>
+ <strong>&lt;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 @@
  &lt;h1>I took a photo&lt;/h1>
  &lt;p>I went out today and took a photo!&lt;/p>
  &lt;figure>
-  <strong>&lt;img src="photo2.jpeg" alt="{photograph}"></strong>
+  <strong>&lt;img src="photo2.jpeg"></strong>
   &lt;legend>A photograph taken blindly from my front porch.&lt;/legend>
  &lt;/figure>
 &lt;/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>&lt;p>&lt;label>What does this image say?
-<strong>&lt;img src="captcha.cgi?id=8934" alt="{captcha}"></strong>
+<strong>&lt;img src="captcha.cgi?id=8934" title="CAPTCHA"></strong>
 &lt;input type=text name=captcha>&lt;/label>
 (If you cannot see the image, you can use an &lt;a
 href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
@@ -17078,24 +17091,16 @@
   &lt;tr> &lt;th> Images &lt;th> Descriptions
  &lt;tbody>
   &lt;tr>
-   &lt;td> <strong>&lt;img src="2421.png" alt="{}"></strong>
+   &lt;td> <strong>&lt;img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"></strong>
    &lt;td> &lt;input name="alt2421">
   &lt;tr>
-   &lt;td> <strong>&lt;img src="2422.png" alt="{}"></strong>
+   &lt;td> <strong>&lt;img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"></strong>
    &lt;td> &lt;input name="alt2422">
 &lt;/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>&lt;html lang="fi">
- ...
- <strong>&lt;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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 9 October 2008 20:32:59 GMT