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

html5/spec Overview.html,1.1278,1.1279

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Sat, 23 Aug 2008 08:05:22 +0000
To: public-html-commits@w3.org
Message-Id: <E1KWo7e-0002YK-Ho@lionel-hutz.w3.org>

Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv9798

Modified Files:
	Overview.html 
Log Message:
More examples of alternative text. Also, split up the three cases of key content into subsections for easier editing. (whatwg r2106)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.1278
retrieving revision 1.1279
diff -u -d -r1.1278 -r1.1279
--- Overview.html	22 Aug 2008 19:57:37 -0000	1.1278
+++ Overview.html	23 Aug 2008 08:05:19 -0000	1.1279
@@ -27,7 +27,7 @@
     for HTML and XHTML</h2>
 
    <h2 class="no-num no-toc" id=editors0><!-- "W3C Working Draft" -->
-    Editor's Draft <!--ZZZ-->22 August 2008</h2>
+    Editor's Draft <!--ZZZ-->23 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 22
+   the W3C Recommendation track. <!--ZZZ:--> This specification is the 23
    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) -->
@@ -16797,157 +16797,218 @@
    be the case, for instance, on a page that is part of a photo gallery. The
    image is the whole <em>point</em> of the page containing it.
 
-  <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><a
-   href="#alt0">alt</a></code> attribute.
+  <p>How to provide alternative text for an image that is a key part of the
+   content depends on the image's provenance.
 
-  <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><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.
+  <dl>
+   <dt>The general case
 
-  <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.
+   <dd>
+    <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><a href="#alt0">alt</a></code> attribute.</p>
 
-  <p>In any case, if an image is a key part of the content, the <code
-   title=attr-img-alt><a href="#alt0">alt</a></code> attribute must not be
-   omitted or specified with an empty value.
+    <div class=example>
+     <p>A screenshot in a gallery of screenshots for a new OS, with some
+      alternative text:</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>
 
-   <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>
+   <dt>Images that defy a complete description
+
+   <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>
-  </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>
+     <p>Note that the following would be a very bad use of alternative text:</p>
 
-   <pre>&lt;figure>
-<strong>&lt;img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
-&lt;legend>Bubbles traveled everywhere with us.&lt;/legend>
+     <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>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>
+     <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>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 class=example>
+     <p>Another example of an image that defies full description is a
+      fractal, which, by definition, is infinite in complexity.</p>
 
-   <pre>&lt;article>
+     <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>
+
+   <dt>Images whose contents are not known
+
+   <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><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>
+
+    <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 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" 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>
 
-  <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>
+    <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>
 
-  <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>
+     <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;html lang="fi">
+     <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>
+    </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>
-  </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><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 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><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>
+  </dl>
 
   <h6 id=an-image><span class=secno>4.7.2.1.9. </span>An image not intended
    for the user</h6>
@@ -55708,22 +55769,23 @@
    Fern&aacute;ndez, Alastair Campbell, Alexey 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'
+   Sheridan, Aurelien Levy, Ben 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, Jacques
Received on Saturday, 23 August 2008 08:05:57 GMT

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