HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
1972[Authors] [Conformance Checkers] Try a new way of handling images that the author doesn't know much about.2008-08-04 07:52
@@ -13116,27 +13116,27 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   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
   <span title="origin">cross-origin</span> access control policies
   that mitigate this attack.</p>
 
   <p>Once the resource has been fetched, if the image is a valid and
-  supported image, the user agent must <span>fire a <code
-  title="event-load">load</code> event</span> on the <code>img</code>
-  element (this happens after <code
-  title="dom-img-complete">complete</code> starts returning true). If
-  the fetching process fails without a response from the remote
-  server, or it completes but the image is not a valid or supported
-  image, the user agent must <span>fire an <code
+  supported image, then the image is said to be <i>available</i>; the
+  user agent must <span>fire a <code title="event-load">load</code>
+  event</span> on the <code>img</code> element (this happens after
+  <code title="dom-img-complete">complete</code> starts returning
+  true). If the fetching process fails without a response from the
+  remote server, or it completes but the image is not a valid or
+  supported image, the user agent must <span>fire an <code
   title="event-error">error</code> event</span> on the
   <code>img</code> element.</p>
 
   <p>Whether the image is fetched successfully or not (e.g. whether
   the response code was a 2xx code or equivalent) must be ignored when
   determining the image's type and whether it is a valid image.</p>
 
   <p class="note">This allows servers to return images with error
   responses, and have them displayed.</p>
 
@@ -13153,54 +13153,179 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
   display the first page of a multipage resource (e.g. a PDF
   file). User agents must not allow the resource to act in an
   interactive fashion, but should honour any animation in the
   resource.</p>
 
   <p>This specification does not specify which image types are to be
   supported.</p>
 
   <hr>
 
-  <p>The element represents the image specified by the <code
-  title="attr-img-src">src</code> attribute.</p>
-
-  <p>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 may be omitted in the
-  rendering without affecting the meaning of the document. If the
-  image is not available, then the element represents nothing.</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. If the image is not available, then the element represents
-  that string instead.</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. If the image is not available, the element
-  represents some indication that the image is missing.</p>
+  <p>What an <code>img</code> element represents depends on the <code
+  title="attr-img-src">src</code> attribute and the <code
+  title="attr-img-alt">alt</code> attribute.</p>
+
+  <dl class="switch">
+
+   <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
+   the empty string</dt>
+
+   <dd>
+
+    <p>The image is either decorative or supplemental to the rest of
+    the content, redundant with some other information in the
+    document.</p>
+
+    <p>If the image is available 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>
+    attribute.</p>
+
+    <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 with at least one character whose first character is not a
+   U+007B LEFT CURLY BRACKET character ({) or whose last character is
+   not a U+007D RIGHT CURLY BRACKET character (})</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 available 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>
+    attribute.</p>
+
+    <p>Otherwise, the element represents the text given by the <code
+    title="attr-img-alt">alt</code> attribute. 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).</p>
+
+    <p>If the image is available, the element represents the image
+    specified by the <code title="attr-img-src">src</code>
+    attribute.</p>
+
+    <p>If the image is not available 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, providing 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 not</dt>
+
+   <dd>
+
+    <p>The image's role in the document is unknown.</p>
+
+    <p>If the image is available, the element represents the image
+    specified by the <code title="attr-img-src">src</code>
+    attribute.</p>
+
+    <p>If the image is not available 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>
+
+   </dd>
+
+   <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 the empty string</dt>
+
+   <dd>
+
+    <p>The element represents nothing.</p>
+
+   </dd>
+
+   <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 with at least one character whose first character is
+   not a U+007B LEFT CURLY BRACKET character ({) or whose last
+   character is not a U+007D RIGHT CURLY BRACKET character (})</dt>
+
+   <dd>
+
+    <p>The element represents the text given by the <code
+    title="attr-img-alt">alt</code> attribute.</p>
+
+   </dd>
+
+   <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>
+
+   <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">alt</code> attribute).</p>
+
+   </dd>
+
+   <dt>If neither the <code title="attr-img-src">src</code> attribute
+   nor the <code title="attr-img-alt">alt</code> attribute are
+   set</dt>
+
+   <dd>
+
+    <p>The element represents nothing.</p>
+
+   </dd>
+
+  </dl>
 
   <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>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>User agents may always provide the user with the option to
+  display any image, or to prevent any image from being
+  displayed. User agents may also apply image analysis heuristics to
+  help the user make sense of the image when the user is unable to
+  make direct use of the image, e.g. due to a visual disability or
+  because they are using a text terminal with no graphics
+  capabilities.</p>
 
   <p>The <em>contents</em> of <code>img</code> elements, if any, are
   ignored for the purposes of rendering.</p>
 
   <hr>
 
   <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>
 
@@ -13302,20 +13427,35 @@ It is used as decoration all over the town.&lt;/p></pre>
 
    <pre>&lt;p>He picked up the folder and a piece of paper fell out.&lt;/p>
 &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>
+
+   <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>
+
+   <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>
 
   <div class="example">
 
    <p>Here are some more examples showing the same picture used in
    different contexts, with different appropriate alternate texts each
    time.</p>
 
    <pre>&lt;article>
  &lt;h1>My cats&lt;/h1>
@@ -13352,20 +13492,21 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
    <pre>&lt;article>
  &lt;h1>Fluffy and the Yarn&lt;/h1>
  &lt;p>Fluffy was a cat who liked to play with yarn. He also liked to jump.&lt;/p>
  &lt;aside>&lt;img src="fluffy.jpg" alt="" title="Fluffy">&lt;/aside>
  &lt;p>He would play in the morning, he would play in the evening.&lt;/p>
 &lt;/article></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:</p>
 
   <dl>
 
    <dt>A phrase or paragraph with an alternative graphical representation</dt>
 
    <dd>
@@ -13674,69 +13815,74 @@ The island of Shalott.&lt;/p></pre>
     example if the image is part of a series of screenshots in a
     magazine review, or part of a comic strip, or is a photograph in a
     blog entry about that photograph, text that conveys can serve as a
     substitute for the image must be given as the contents of the
     <code title="attr-img-alt">alt</code> attribute.</p>
 
     <p>In a rare subset of these cases, there might be no alternative
     text available. This could be the case, for instance, on a photo
     upload site, if the site has received 8000 photos from a user
     without the user annotating any of them. In such cases, the <code
-    title="attr-img-alt">alt</code> attribute may be omitted, but the
-    <code title="attr-img-alt">alt</code> attribute should be
-    included, with a useful value, if at all possible.</p>
+    title="attr-img-alt">alt</code> attribute's value must be a
+    description of the <em>kind</em> of image, surrounded by braces
+    ("{" and "}"). The kind of image is something along the lines of
+    "photo", "diagram", "painting", "user-uploaded image", etc.</p>
 
     <p>In any case, if an image is a key part of the content, the
     <code title="attr-img-alt">alt</code> attribute must not be
-    specified with an empty value.</p>
+    omitted or specified with an empty value.</p>
 
     <div class="example">
 
      <p>A screenshot in a gallery of screenshots for a new OS, with
      some alternative text:</p>
 
      <pre>&lt;figure>
  <strong>&lt;img src="KDE%20Light%20desktop.png"
       alt="The desktop is blue, with icons along the left hand side in
            two columns, reading System, Home, K-Mail, etc. A window is
            open showing that menus wrap to a second line if they
            cannot fit in the window. The window has a list of icons
            along the top, with an address bar below it, a list of
            icons for tabs along the left edge, a status bar on the
            bottom, and two panes in the middle. The desktop has a bar
            at the bottom of the screen with a few buttons, a pager, a
            list of open applications, and a clock."></strong>
  &lt;legend>Screenshot of a KDE desktop.&lt;/legend>
 &lt;/figure></pre>
 
+    </div>
+
+    <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"></strong>
+ <strong>&lt;img src="1100670787_6a7c664aef.jpg" alt="{photo}"></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>
 
     </div>
 
     <div class="example">
 
      <p>Sometimes there simply is no text that can do justice to an
      image. For example, there is little that can be said to usefully
      describe a Rorschach inkblot test.</p>
 
      <pre>&lt;figure>
- <strong>&lt;img src="/commons/a/a7/Rorschach1.jpg"></strong>
+ <strong>&lt;img src="/commons/a/a7/Rorschach1.jpg" alt="{inkblot test}"></strong>
  &lt;legend>A black outline of the first of the ten cards
  in the Rorschach inkblot test.&lt;/legend>
 &lt;/figure></pre>
 
      <p>Note that the following would be a very bad use of alternative
      text:</p>
 
      <pre class="bad">&lt;!-- This example is wrong. Do not copy it. -->
 &lt;figure>
  &lt;img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
@@ -13751,22 +13897,23 @@ The island of Shalott.&lt;/p></pre>
      any more than if they had only read or heard the caption
      once.</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 be
-    omitted when no alternative text is available and none can be made
+    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>
 
    </dd>
 
 
    <dt>An image in an e-mail or document intended for a specific person who is known to be able to view images</dt>
 
    <dd>
 
     <p>When an image is included in a communication (such as an HTML
@@ -13778,20 +13925,25 @@ The island of Shalott.&lt;/p></pre>
     that the e-mail is still usable should the user use a mail client
     that does not support images, or should the e-mail be forwarded on
     to other users whose abilities might not include easily seeing
     images.</p>
 
    </dd>
 
 
   </dl>
 
+  <p>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>
 
 
 
   <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>
    <dd>Where <span>embedded content</span> is expected.</dd>

|