HTML Standard Tracker

Filter

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
@@ -14331,191 +14331,268 @@ Noodliness do you wish to reach out for?</p>
 
 
 
   <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
   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>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>
-
-  <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>
+  <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 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>
+  <dl>
 
-  <div class="example">
+   <dt>The general case</dt>
 
-   <p>A screenshot in a gallery of screenshots for a new OS, with
-   some alternative text:</p>
+   <dd>
 
-   <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>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>
+
+    <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>
 
-  <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 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">
+    <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>
+     <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>
+
+     <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 class="example">
+    </div>
 
-   <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 class="example">
 
-   <pre>&lt;html lang="fi">
+     <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
   than showing an image, e.g. as part of a service to count page
   views, then the <code title="attr-img-alt">alt</code> attribute must
   be the empty string.</p>
 
@@ -50615,37 +50692,37 @@ interface <dfn>TimeoutHandler</dfn> {
 
 
   <h2 class="no-num">Acknowledgements</h2> <!-- ACKS -->
 
   <p>Thanks to Aankhen, Aaron Boodman, Aaron Leventhal, Adam Barth,
   Adam Roben, Addison Phillips, Adele Peterson, Adrian Sutton,
   Agust&iacute;n 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'
+  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 Distler, James Graham, James Justin Harrell, James M Snell,
   James Perrett, Jan-Klaas Kollhof, Jason White, Jasper Bryant-Greene,
   Jeff Cutsinger, Jeff Schiller, Jeff Walden, Jens Bannmann, Jens
   Fendler, Jeroen van der Meer, Jim Jewett, Jim Meehan, Joe Clark,
   Joseph Kesselman, Jjgod Jiang, Joel Spolsky, Johan Herland, John
   Boyer, John Bussjaeger, John Harding, Johnny Stenback, Jon Perlow,
   Jonathan Worent, Jorgen Horstink, Josh Levenberg, Joshua Randall,

|