HTML Standard Tracker

Filter

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
@@ -9751,21 +9751,21 @@ isn't his only passion. He also enjoys other pleasures.</p>
     title="concept-section">section</span> <var title="">current
     section</var>.</p>
 
    </li>
 
    <li><p>If the <var title="">current outlinee</var> is null,
    then there was no <span>sectioning content</span> element or
    <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>
 
    <li><p>Associate all nodes with the heading of the <span
    title="concept-section">section</span> with which they are
    associated, if any.</p></li>
 
    <li><p>If <var title="">current outlinee</var> is <span>the
    <code>body</code> element</span>, then the outline created for that
    element is the <span>outline</span> of the entire document.</p></li>
@@ -13619,52 +13619,21 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
     <p>Otherwise, the element represents nothing, and may be omitted
     completely from the rendering. User agents may provide the user
     with a notification that an image is present but has been omitted
     from the rendering.</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
-   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>
-
-   <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>
+   value that isn't empty</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>
 
     <p>If the image is <i>available</i> and the user agent is configured to
     display that image, then the element represents the image
     specified by the <code title="attr-img-src">src</code>
@@ -13675,44 +13644,63 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
     the user with a notification that an image is present but has been
     omitted from the rendering.</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 not</dt>
 
    <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>
+
+     <!-- 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>
 
-    <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>
+     <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
    set and either the <code title="attr-img-alt">alt</code> attribute
    is set to the empty string or the <code
    title="attr-img-alt">alt</code> attribute is not set at all</dt>
 
    <dd>
 
@@ -13857,25 +13845,26 @@ It is used as decoration all over the town.&lt;/p></pre>
 &lt;p>&lt;img src="carouge.svg" alt="Shaped like a shield, the paper had a
 red background, a green tree, and a yellow lion with its tongue
 hanging out and whose tail was shaped like an S.">&lt;/p>
 &lt;p>He stared at the folder. S! The answer he had been looking for all
 this time was simply the letter S! How had he not seen that before? It all
 came together now. The phone call where Hector had referred to a lion's tail,
 the time Marco had stuck his tongue out...&lt;/p></pre>
 
    <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
    providing replacement text makes the document more difficult to use
    for people who are unable to view images, e.g. blind users, or
    users or very low-bandwidth connections or who pay by the byte, or
    users who are forced to use a text-only Web browser.</p>
 
   </div>
 
@@ -13927,26 +13916,20 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
   </div>
 
 
 
   <h5 id="alt">Requirements for providing text to act as an alternative for images</h5>
 
   <p>The requirements for the <code title="attr-img-alt">alt</code>
   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>,
   or a <code>button</code> element, has no textual content but
   contains one or more images, the <code
   title="attr-img-alt">alt</code> attributes must contain text that
   together convey the purpose of the link or button.</p>
 
   <div class="example">
@@ -14249,21 +14232,21 @@ the Tokeniser.&lt;/p>
    elements can be used. In the latter case, the image would in fact
    be a phrase or paragraph with an alternative graphical
    representation, and would thus require alternative text.</p>
 
    <pre>&lt;!-- Using the title="" attribute -->
 &lt;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.&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> -->
 &lt;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.&lt;/p>
 &lt;figure>
  <strong>&lt;img src="images/parsing-model-overview.png" alt="The Network leads
@@ -14394,21 +14377,21 @@ The island of Shalott.&lt;/p></pre>
 
    <p>In the following example, a picture representing the flying
    spaghetti monster emblem, with each of the left noodly appendages
    and the right noodly appendages in different images, so that the
    user can pick the left side or the right side in an adventure.</p>
 
    <pre>&lt;h1>The Church&lt;/h1>
 &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>
 
 
 
   <h6>A key part of the content</h6>
 
   <p>In some cases, the image is a critical part of the
   content. This could be the case, for instance, on a page that is
@@ -14548,60 +14531,78 @@ of various sizes."></strong></pre>
     <p>In some unfortunate cases, there might be no alternative text
     available at all, either because the image is obtained in some
     automated fashion without any associated alternative text (e.g. a
     Webcam), or because the page is being generated by a script using
     user-provided images where the user did not provide suitable or
     usable alternative text (e.g. photograph sharing sites), or
     because the author does not himself know what the images represent
     (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">
 
      <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
+     <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">
 
      <p>A blind user's blog in which a photo taken by the user is
      shown. Initially, the user might not have any idea what the photo
      he took shows:</p>
 
      <pre>&lt;article>
  &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>
 
      <p>Eventually though, the user might obtain a description of the
      image from his friends and could then include alternative text:</p>
 
      <pre>&lt;article>
  &lt;h1>I took a photo&lt;/h1>
  &lt;p>I went out today and took a photo!&lt;/p>
@@ -14616,72 +14617,64 @@ of various sizes."></strong></pre>
  &lt;/figure>
 &lt;/article></pre>
 
     </div>
 
     <div class="example">
 
      <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>
 
      <p>Another example would be software that displays images and
      asks for alternative text precisely for the purpose of then
      writing a page with correct alternative text. Such a page could
      have a table of images, like this:</p>
 
      <pre>&lt;table>
  &lt;thead>
   &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">title</code> attribute.</p>
 
     </div>
 
     <p class="note">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), 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>
 
   </dl>
 
 
 
   <h6>An image not intended for the user</h6>
 
   <p>Generally authors should avoid using <code>img</code> elements
@@ -14722,20 +14715,26 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
 
   <p>A corollary to this is that the <code
   title="attr-img-alt">alt</code> attribute's value should never
   contain text that could be considered the image's <em>caption</em>,
   <em>title</em>, or <em>legend</em>. It is supposed to contain
   replacement text that could be used by users <em>instead</em> of the
   image; it is not meant to supplement the image. The <code
   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">
    <dt>Categories</dt>
    <dd><span>Embedded content</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>

|