[html5] r2106 - [a] (0) More examples of alternative text. Also, split up the three cases of key [...]
whatwg at whatwg.org
whatwg at whatwg.org
Sat Aug 23 01:05:35 PDT 2008
Author: ianh
Date: 2008-08-23 01:05:30 -0700 (Sat, 23 Aug 2008)
New Revision: 2106
Modified:
index
source
Log:
[a] (0) More examples of alternative text. Also, split up the three cases of key content into subsections for easier editing.
Modified: index
===================================================================
--- index 2008-08-22 19:57:49 UTC (rev 2105)
+++ index 2008-08-23 08:05:30 UTC (rev 2106)
@@ -28,7 +28,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft>Draft Recommendation — 22 August
+ <h2 class="no-num no-toc" id=draft>Draft Recommendation — 23 August
2008</h2>
<p>You can take part in this work. <a
@@ -16789,157 +16789,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>
- <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>
+ <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><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 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>
@@ -55700,22 +55761,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
Modified: source
===================================================================
--- source 2008-08-22 19:57:49 UTC (rev 2105)
+++ source 2008-08-23 08:05:30 UTC (rev 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><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>
+ <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>
+ </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><figure>
-<strong><img src="1100670787_6a7c664aef.jpg" alt="{photo}"></strong>
-<legend>Bubbles traveled everywhere with us.</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><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>
- <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"><!-- 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>
- <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><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><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><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>
- <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><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 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>
+ <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><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>
- <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><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><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">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ø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'
+ 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,
More information about the Commit-Watchers
mailing list