HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/2115

File a bug

SVNBugCommentTime (UTC)
2115[Authors] [Conformance Checkers] Address all recent alt='' feedback. For further details see: http://lists.w3.org/Archives/Public/public-html/2008Aug/0759.html2008-08-26 08:19
Index: source
===================================================================
--- source	(revision 2114)
+++ source	(revision 2115)
@@ -9758,7 +9758,7 @@
    <span>sectioning root</span> element in the DOM. There is no
    <span>outline</span>. Abort these steps.</p></li>
 
-   <li><p>Associate any nodes that were not associated a <span
+   <li><p>Associate any nodes that were not associated with a <span
    title="concept-section">section</span> in the steps above with <var
    title="">current outlinee</var> as their section.</p></li>
 
@@ -13626,41 +13626,10 @@
 
    <dt>If the <code title="attr-img-src">src</code> attribute is set
    and the <code title="attr-img-alt">alt</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 (})</dt>
+   value that isn't empty</dt>
 
    <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">alt</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">src</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">alt</code> attribute).</p>
-
-   </dd>
-
-   <dt>If the <code title="attr-img-src">src</code> attribute is set
-   and the <code title="attr-img-alt">alt</code> attribute is set to a
-   value that isn't matched by the previous two entries (not empty,
-   not "<code title="">{...}</code>")</dt>
-
-   <dd>
-
     <p>The image is a key part of the content; the <code
     title="attr-img-alt">alt</code> attribute gives a textual
     equivalent or replacement for the image.</p>
@@ -13682,31 +13651,50 @@
 
    <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">src</code>
+    <p>If the image is <i>available</i>, the element represents the
+    image specified by the <code title="attr-img-src">src</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>
+    <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 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>
 
-   </dd>
+    <ol>
 
-   <dt>If the <code title="attr-img-src">src</code> attribute is not
-   set and the <code title="attr-img-alt">alt</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 (})</dt>
+     <li><p>If the image has a <code title="attr-title">title</code>
+     attribute whose value is not the empty string, then the value of
+     that attribute is the caption information; abort these
+     steps.</p></li>
 
-   <dd>
+     <li><p>If the image is the child of a <code>figure</code> element
+     that has a child <code>legend</code> element, then the contents
+     of the first such <code>legend</code> element are the caption
+     information; abort these steps.</p></li>
 
-    <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">alt</code> attribute).</p>
+     <!-- aria processing goes here -->
 
+     <li><p>Run the algorithm to create the <span>outline</span> for
+     the document.</p></li>
+
+     <li><p>If the <code>img</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">alt</code>
+     attribute and that are associated with the same heading in the
+     outline as the <code>img</code> element in question, then there
+     is no caption information; abort these steps.</p></li>
+
+     <li><p>The caption information is the heading with which the
+     image is associated according to the outline.</p></li>
+
+    </ol>
+
    </dd>
 
    <dt>If the <code title="attr-img-src">src</code> attribute is not
@@ -13864,11 +13852,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>
+   no replacement text can be provided, and instead only a brief
+   caption for the image is provided, in the <code
+   title="attr-title">title</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
@@ -13934,13 +13923,7 @@
   attribute depend on what the image is intended to represent, as
   described in the following sections.</p>
 
-  <p>A general requirement that applies in all cases is that the <code
-  title="attr-img-alt">alt</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.</p>
 
-
   <h6>A link or button containing nothing but the image</h6>
 
   <p>When an <span>a</span> element that is a <span>hyperlink</span>,
@@ -14256,7 +14239,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> -->
@@ -14401,7 +14384,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>
@@ -14555,18 +14538,31 @@
     (e.g. a blind photographer sharing an image on his blog).</p>
 
     <p>In such cases, the <code title="attr-img-alt">alt</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>
+    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">title</code> attribute is
+     present and has a non-empty value.</li>
+
+     <li>The <code>img</code> element is in a <code>figure</code>
+     element that contains a <code>legend</code> element that contains
+     content other than <span>inter-element whitespace</span>.</li>
+
+     <li>The <code>img</code> element is the only <code>img</code>
+     element without an <code title="attr-img-alt">alt</code>
+     attribute in its <span title="concept-section">section</span>,
+     and its <span title="concept-section">section</span> has an
+     associated heading.</li>
+
+    </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>
+    not be acceptable to omit the code title="attr-img-alt">alt</code>
+    attribute.</p>
 
     <div class="example">
 
@@ -14574,11 +14570,16 @@
      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
+     <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>
 
@@ -14594,7 +14595,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>
@@ -14623,11 +14624,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>
+     if the user can literally read the graphic. Here is one way to
+     mark up a CAPTCHA (note the <code title="attr-title">title</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>
@@ -14642,28 +14644,17 @@
   &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>
+     <p>Notice that even in this example, as much useful information
+     as possible is still included in the <code
+     title="attr-title">title</code> attribute.</p>
 
-    <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>
-
     </div>
 
     <p class="note">Since some users cannot use images at all
@@ -14671,10 +14662,12 @@
     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">alt</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>
+    title="attr-img-alt">alt</code> 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">alt</code> attribute.</p>
 
    </dd>
 
@@ -14729,10 +14722,16 @@
   title="attr-title">title</code> attribute can be used for
   supplemental information.</p>
 
+  <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.</p>
 
 
 
 
+
   <h4>The <dfn><code>iframe</code></dfn> element</h4>
 
   <dl class="element">

|