HTML Standard Tracker

Diff (omit for latest revision)
Filter

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

File a bug

SVNBugCommentTime (UTC)
2106[Authors] More examples of alternative text. Also, split up the three cases of key content into subsections for easier editing.2008-08-23 08:05
Index: source
===================================================================
--- source	(revision 2105)
+++ source	(revision 2106)
@@ -14338,180 +14338,257 @@
   part of a photo gallery. The image is the whole <em>point</em> of
   the page containing it.</p>
 
-  <p>When it is possible for alternative text to be provided, for
-  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>How to provide alternative text for an image that is a key part
+  of the content depends on the image's provenance.</p>
 
-  <p>In some unfortunate cases, there might be no alternative text
-  available, either because the image is obtained in some automated
-  fashion without any associated alternative text, or because the
-  nature of the images is such that no alternative text can be
-  obtained. 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>
+  <dl>
 
-  <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>
+   <dt>The general case</dt>
 
-  <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
-  omitted or specified with an empty value.</p>
+   <dd>
 
-  <div class="example">
+    <p>When it is possible for detailed alternative text to be
+    provided, for 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>A screenshot in a gallery of screenshots for a new OS, with
-   some alternative text:</p>
+    <div class="example">
 
-   <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>
+     <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>
 
-  <div class="example">
+   </dd>
 
-   <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>
-&lt;legend>Bubbles traveled everywhere with us.&lt;/legend>
+   <dt>Images that defy a complete description</dt>
+
+   <dd>
+
+    <p>In certain cases, the nature of the image might be such that
+    providing thorough alternative text is impractical. For example,
+    the image could be indistinct, or could be a complex fractal, or
+    could be a detailed topographical map.</p>
+
+    <p>In these cases, some alternative text must be provided, but it
+    may be somewhat brief.</p>
+
+    <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. However, a description, even
+     if brief, is still better than nothing:</p>
+
+     <pre>&lt;figure>
+ <strong>&lt;img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
+ symmetry with indistinct edges, with a small gap in the center, two
+ larger gaps offset slightly from the center, with two similar gaps
+ under them. The outline is wider in the top half than the bottom
+ half, with the sides extending upwards higher than the center, and
+ the center extending below the sides."></strong>
+ &lt;legend>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.&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>Note that the following would be a very bad use of alternative
+     text:</p>
 
-  </div>
+     <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
+ of the first of the ten cards in the Rorschach inkblot test.">
+ &lt;legend>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.&lt;/legend>
+&lt;/figure></pre>
 
-  <div class="example">
+     <p>Including the caption in the alternative text like this isn't
+     useful because it effectively duplicates the caption for users
+     who don't have images, taunting them twice yet not helping them
+     any more than if they had only read or heard the caption
+     once.</p>
 
-   <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>
+    </div>
 
-   <pre>&lt;article>
+    <div class="example">
+
+     <p>Another example of an image that defies full description is a
+     fractal, which, by definition, is infinite in complexity.</p>
+
+     <p>The following example shows one possible way of providing
+     alternative text for the full view of an image of the Mandelbrot
+     set.</p>
+
+     <pre><strong>&lt;img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
+its cusp on the real axis in the positive direction, with a smaller
+bulb aligned along the same center line, touching it in the negative
+direction, and with these two shapes being surrounded by smaller bulbs
+of various sizes."></strong></pre>
+
+    </div>
+
+   </dd>
+
+
+   <dt>Images whose contents are not known</dt>
+
+   <dd>
+
+    <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, 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, or because the author does not himself
+    know what the images represent (e.g. as in the case of a blind
+    photographer sharing his library).</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>
+
+    <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>
+
+    <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>
+ &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>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>
-  &lt;img src="photo2.jpeg" alt="{photograph}">
+  <strong>&lt;img src="photo2.jpeg" alt="{photograph}"></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>
+     <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>
+     <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>
-  &lt;img src="photo2.jpeg" alt="The photograph shows my hummingbird
+  <strong>&lt;img src="photo2.jpeg" alt="The photograph shows my hummingbird
   feeder hanging from the edge of my roof. It is half full, but there
   are no birds around. In the background, out-of-focus trees fill the
   shot. The feeder is made of wood with a metal grate, and it contains
   peanuts. The edge of the roof is wooden too, and is painted white
-  with light blue streaks.">
+  with light blue streaks."></strong>
   &lt;legend>A photograph taken blindly from my front porch.&lt;/legend>
  &lt;/figure>
 &lt;/article></pre>
 
-  </div>
+    </div>
 
-  <div class="example">
+    <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>
+     <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>
 
-   <pre>&lt;figure>
-<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
-of the first of the ten cards in the Rorschach inkblot test.">
-&lt;legend>A black outline of the first of the ten cards
-in the Rorschach inkblot test.&lt;/legend>
-&lt;/figure></pre>
-
-   <p>Including the caption in the alternative text like this isn't
-   useful because it effectively duplicates the caption for users
-   who don't have images, taunting them twice yet not helping them
-   any more than if they had only read or heard the caption
-   once.</p>
-
-  </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>
-
-   <pre>&lt;p>&lt;label>What does this image say?
+     <pre>&lt;p>&lt;label>What does this image say?
 <strong>&lt;img src="captcha.cgi?id=8934" alt="{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>
 
-  </div>
+     <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>
 
-  <div class="example">
+     <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> &lt;input name="alt2421">
+  &lt;tr>
+   &lt;td> <strong>&lt;img src="2422.png" alt="{}"></strong>
+   &lt;td> &lt;input name="alt2422">
+&lt;/table></pre>
 
-   <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>
+    </div>
 
-   <pre>&lt;html lang="fi">
+    <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>
+    </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>
+    <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>
 
+   </dd>
 
+  </dl>
 
+
+
   <h6>An image not intended for the user</h6>
 
   <p>If an <code>img</code> element is being used for purposes other
@@ -50622,23 +50699,23 @@
   Feldgendler, Anders Carlsson, Andrew Gove, Andrew Sidwell, Anne van
   Kesteren, Anthony Hickson, Anthony Ricaud, Antti Koivisto, Arphen
   Lin, Asbj&oslash;rn Ulsberg, Ashley Sheridan, Aurelien Levy, Ben
-  Godfrey, Ben Meadowcroft, Ben Millard, Benjamin Hawkes-Lewis, Bert
-  Bos, Bill Mason, Billy Wong, Bjoern Hoehrmann, Boris Zbarsky, Brad
-  Fults, Brad Neuberg, Brady Eidson, Brendan Eich, Brett Wilson, Brian
-  Campbell, Brian Smith, Bruce Miller, Cameron McCormack, Carlos
-  Perell&oacute; Mar&iacute;n, Chao Cai, &#xc724;&#xc11d;&#xcc2c;
-  (Channy Yun), Charl van Niekerk, Charles Iliya Krempeaux, Charles
-  McCathieNevile, Christian Biesinger, Christian Johansen, Chriswa,
-  Cole Robison, Collin Jackson, Daniel Barclay, Daniel Brumbaugh
-  Keeney, Daniel Glazman, Daniel Peng, Daniel Sp&aring;ng, Daniel
-  Steinberg, Danny Sullivan, Darin Adler, Darin Fisher, Dave Camp,
-  Dave Singer, Dave Townsend<!-- Mossop on moz irc -->, David Baron,
-  David Bloom, David Carlisle, David Flanagan, David
-  H&aring;s&auml;ther, David Hyatt, David Smith, Dean Edridge, Debi
-  Orton, Derek Featherstone, DeWitt Clinton, Dimitri Glazkov,
-  dolphinling, Doron Rosenberg, Doug Kramer, Edward O'Connor, Eira
-  Monstad, Elliotte Harold, Eric Law, Erik Arvidsson, Evan Martin,
-  Evan Prodromou, fantasai, Felix Sasaki, Franck 'Shift'
+  Boyle, Ben Godfrey, Ben Meadowcroft, Ben Millard, Benjamin
+  Hawkes-Lewis, Bert Bos, Bill Mason, Billy Wong, Bjoern Hoehrmann,
+  Boris Zbarsky, Brad Fults, Brad Neuberg, Brady Eidson, Brendan Eich,
+  Brett Wilson, Brian Campbell, Brian Smith, Bruce Miller, Cameron
+  McCormack, Carlos Perell&oacute; Mar&iacute;n, Chao Cai,
+  &#xc724;&#xc11d;&#xcc2c; (Channy Yun), Charl van Niekerk, Charles
+  Iliya Krempeaux, Charles McCathieNevile, Christian Biesinger,
+  Christian Johansen, Chriswa, Cole Robison, Collin Jackson, Daniel
+  Barclay, Daniel Brumbaugh Keeney, Daniel Glazman, Daniel Peng,
+  Daniel Sp&aring;ng, Daniel Steinberg, Danny Sullivan, Darin Adler,
+  Darin Fisher, Dave Camp, Dave Singer, Dave Townsend<!-- Mossop on
+  moz irc -->, David Baron, David Bloom, David Carlisle, David
+  Flanagan, David H&aring;s&auml;ther, David Hyatt, David Smith, Dean
+  Edridge, Debi Orton, Derek Featherstone, DeWitt Clinton, Dimitri
+  Glazkov, dolphinling, Doron Rosenberg, Doug Kramer, Edward O'Connor,
+  Eira Monstad, Elliotte Harold, Eric Law, Erik Arvidsson, Evan
+  Martin, Evan Prodromou, fantasai, Felix Sasaki, Franck 'Shift'
   Qu&eacute;lain, Garrett Smith, Geoffrey Garen, Geoffrey Sneddon,
   H&aring;kon Wium Lie, Henri Sivonen, Henrik Lied, Henry Mason, Hugh
   Winkler, Ignacio Javier, Ivo Emanuel Gon&ccedil;alves, J. King,

|