- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 23 Aug 2008 08:05:22 +0000
- To: public-html-commits@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><figure>
+ <strong><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>
+ <legend>Screenshot of a KDE desktop.</legend>
+</figure></pre>
+ </div>
- <pre><figure>
-<strong><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>
-<legend>Screenshot of a KDE desktop.</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><figure>
+ <strong><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>
+ <legend>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</legend>
</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><figure>
-<strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
-<legend>Bubbles traveled everywhere with us.</legend>
+ <pre class=bad><!-- This example is wrong. Do not copy it. -->
+<figure>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+ of the first of the ten cards in the Rorschach inkblot test.">
+ <legend>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</legend>
</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><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><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><figure>
+ <strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
+ <legend>Bubbles traveled everywhere with us.</legend>
+</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><article>
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <img src="photo2.jpeg" alt="{photograph}">
+ <strong><img src="photo2.jpeg" alt="{photograph}"></strong>
<legend>A photograph taken blindly from my front porch.</legend>
</figure>
</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><article>
+ <pre><article>
<h1>I took a photo</h1>
<p>I went out today and took a photo!</p>
<figure>
- <img src="photo2.jpeg" alt="The photograph shows my hummingbird
+ <strong><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>
<legend>A photograph taken blindly from my front porch.</legend>
</figure>
</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><figure>
-<strong><img src="/commons/a/a7/Rorschach1.jpg" alt="{inkblot test}"></strong>
-<legend>A black outline of the first of the ten cards
-in the Rorschach inkblot test.</legend>
-</figure></pre>
-
- <p>Note that the following would be a very bad use of alternative text:</p>
-
- <pre class=bad><!-- This example is wrong. Do not copy it. -->
-<figure>
-<img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
-of the first of the ten cards in the Rorschach inkblot test.">
-<legend>A black outline of the first of the ten cards
-in the Rorschach inkblot test.</legend>
-</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><p><label>What does this image say?
+ <pre><p><label>What does this image say?
<strong><img src="captcha.cgi?id=8934" alt="{captcha}"></strong>
<input type=text name=captcha></label>
(If you cannot see the image, you can use an <a
href="?audio">audio</a> test instead.)</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><html lang="fi">
+ <pre><table>
+ <thead>
+ <tr> <th> Images <th> Descriptions
+ <tbody>
+ <tr>
+ <td> <strong><img src="2421.png" alt="{}"></strong>
+ <td> <input name="alt2421">
+ <tr>
+ <td> <strong><img src="2422.png" alt="{}"></strong>
+ <td> <input name="alt2422">
+</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><html lang="fi">
...
<strong><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ández, Alastair Campbell, Alexey Feldgendler, Anders Carlsson,
Andrew Gove, Andrew Sidwell, Anne van Kesteren, Anthony Hickson, Anthony
Ricaud, Antti Koivisto, Arphen Lin, Asbjø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ó Marín, Chao Cai, 윤석찬
- (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å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åsä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ó Marín, Chao Cai,
+ 윤석찬 (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å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åsä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élain, Garrett Smith, Geoffrey Garen, Geoffrey Sneddon,
Håkon Wium Lie, Henri Sivonen, Henrik Lied, Henry Mason, Hugh
Winkler, Ignacio Javier, Ivo Emanuel Gonçalves, J. King, Jacques
Received on Saturday, 23 August 2008 08:05:57 UTC