Skip to content

Commit

Permalink
[a] (0) More examples of alternative text. Also, split up the three c…
Browse files Browse the repository at this point in the history 
…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
@Hixie
Hixie committed Aug 23, 2008
1 parent ad1abf4 commit 1d0401d
Show file tree
Hide file tree
Showing 2 changed files with 405 additions and 266 deletions.
316 changes: 189 additions & 127 deletions index
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 1d0401d

Please sign in to comment.