Skip to content
Browse files

[a] (0) More examples of alternative text. Also, split up the three c…

…ases of key content into subsections for easier editing.

git-svn-id: http://svn.whatwg.org/webapps@2106 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent ad1abf4 commit 1d0401d2ea91d3f5d9299e7a610aab1a32c222f8 @Hixie Hixie committed
Showing with 405 additions and 266 deletions.
  1. +189 −127 index
  2. +216 −139 source
View
316 index
@@ -28,7 +28,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 22 August
+ <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 23 August
2008</h2>
<p>You can take part in this work. <a
@@ -16789,157 +16789,218 @@ Noodliness do you wish to reach out for?&lt;/p>
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
+
+ <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>
+
+ <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>
- <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.
+ <dt>Images that defy a complete description
- <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.
+ <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>
- <div class=example>
- <p>A screenshot in a gallery of screenshots for a new OS, with some
- alternative text:</p>
+ <p>In these cases, some alternative text must be provided, but it may be
+ somewhat brief.</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>
+ <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;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">
+ <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>
@@ -55700,22 +55761,23 @@ interface <dfn id=timeouthandler>TimeoutHandler</dfn> {
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
View
355 source
@@ -14338,177 +14338,254 @@ Noodliness do you wish to reach out for?&lt;/p>
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>
@@ -50622,23 +50699,23 @@ interface <dfn>TimeoutHandler</dfn> {
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,

0 comments on commit 1d0401d

Please sign in to comment.
Something went wrong with that request. Please try again.