Skip to content

Commit

Permalink
[e] (0) Move this section up to introduce the section better.
Browse files Browse the repository at this point in the history 
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10185

git-svn-id: http://svn.whatwg.org/webapps@5440 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Sep 8, 2010
1 parent 6c76b4a commit 9570bdc
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 120 deletions.
95 changes: 48 additions & 47 deletions complete.html
View file
Expand Up @@ -520,18 +520,18 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<ol>
<li><a href=#alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</a>
<ol>
<li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</a></li>
<li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
<li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
<li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</a></li>
<li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</a></li>
<li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</a></li>
<li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</a></li>
<li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</a></li>
<li><a href=#a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</a></li>
<li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</a></li>
<li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
<li><a href=#general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</a></li>
<li><a href=#general-guidelines><span class=secno>4.8.1.1.1 </span>General guidelines</a></li>
<li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.2 </span>A link or button containing nothing but the image</a></li>
<li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
<li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
<li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.5 </span>Text that has been rendered to a graphic for typographical effect</a></li>
<li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.6 </span>A graphical representation of some of the surrounding text</a></li>
<li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.7 </span>A purely decorative image that doesn't add any information</a></li>
<li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with no links</a></li>
<li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.9 </span>A group of images that form a single larger picture with links</a></li>
<li><a href=#a-key-part-of-the-content><span class=secno>4.8.1.1.10 </span>A key part of the content</a></li>
<li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.11 </span>An image not intended for the user</a></li>
<li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
<li><a href=#guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</a></li>
<li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
<li><a href=#the-iframe-element><span class=secno>4.8.2 </span>The <code>iframe</code> element</a></li>
Expand Down Expand Up @@ -20696,14 +20696,39 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><

<h5 id=alt><span class=secno>4.8.1.1 </span>Requirements for providing text to act as an alternative for images</h5>


<h6 id=general-guidelines><span class=secno>4.8.1.1.1 </span>General guidelines</h6>

<p>Except where otherwise specified, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be specified and its
value must not be empty; the value must be an appropriate
replacement for the image. The specific requirements for the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute depend on what the image
is intended to represent, as described in the following
sections.</p>

<p>The most general rule to consider when writing alternative text
is the following: <strong>the intent is that replacing every image
with the text of its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
not change the meaning of the page</strong>.</p>

<p>So, in general, alternative text can be written by considering
what one would have written had one not been able to include the
image.</p>

<p>A corollary to this is that the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute's value should never
contain text that could be considered the image's <em>caption</em>,
<em>title</em>, or <em>legend</em>. It is supposed to contain
replacement text that could be used by users <em>instead</em> of the
image; it is not meant to supplement the image. The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can be used for
supplemental information.</p>

<p class=note>One way to think of alternative text is to think
about how you would read the page containing the image to someone
over the phone, without mentioning that there is an image
present. Whatever you say instead of the image is typically a good
start for writing the alternative text.</p>


<h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.1 </span>A link or button containing nothing but the image</h6>
<h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1.1.2 </span>A link or button containing nothing but the image</h6>

<p>When an <a href=#the-a-element>a</a> element that creates a
<a href=#hyperlink>hyperlink</a>, or a <code><a href=#the-button-element>button</a></code> element, has no
Expand Down Expand Up @@ -20752,7 +20777,7 @@ <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.8.1



<h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.2 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
<h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.8.1.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>

<p>Sometimes something can be more clearly stated in graphical
form, for example as a flowchart, a diagram, a graph, or a simple
Expand Down Expand Up @@ -20827,7 +20852,7 @@ <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-chart
</div>


<h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.3 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
<h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.8.1.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>

<p>A document can contain information in iconic form. The icon is
intended to help users of visual browsers to recognize features at
Expand Down Expand Up @@ -20956,7 +20981,7 @@ <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-ico
</div>


<h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.4 </span>Text that has been rendered to a graphic for typographical effect</h6>
<h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.8.1.1.5 </span>Text that has been rendered to a graphic for typographical effect</h6>

<p>Sometimes, an image just consists of text, and the purpose of the
image is not to highlight the actual typographic effects used to
Expand All @@ -20980,7 +21005,7 @@ <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span c



<h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.5 </span>A graphical representation of some of the surrounding text</h6>
<h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.8.1.1.6 </span>A graphical representation of some of the surrounding text</h6>

<p>In many cases, the image is actually just supplementary, and
its presence merely reinforces the surrounding text. In these
Expand Down Expand Up @@ -21062,7 +21087,7 @@ <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=se



<h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.6 </span>A purely decorative image that doesn't add any information</h6>
<h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.8.1.1.7 </span>A purely decorative image that doesn't add any information</h6>

<p>In general, if an image is decorative but isn't especially
page-specific, for example an image that forms part of a site-wide
Expand Down Expand Up @@ -21100,7 +21125,7 @@ <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=



<h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.7 </span>A group of images that form a single larger picture with no links</h6>
<h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with no links</h6>

<p>When a picture has been sliced into smaller image files that are
then displayed together to form the complete picture again, one of
Expand Down Expand Up @@ -21139,7 +21164,7 @@ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span c



<h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.8 </span>A group of images that form a single larger picture with links</h6>
<h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.8.1.1.9 </span>A group of images that form a single larger picture with links</h6>

<p>Generally, <a href=#image-map title="image map">image maps</a> should be
used instead of slicing an image for links.</p>
Expand Down Expand Up @@ -21167,7 +21192,7 @@ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span clas



<h6 id=a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part of the content</h6>
<h6 id=a-key-part-of-the-content><span class=secno>4.8.1.1.10 </span>A key part of the content</h6>

<p>In some cases, the image is a critical part of the
content. This could be the case, for instance, on a page that is
Expand Down Expand Up @@ -21429,7 +21454,7 @@ <h6 id=a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part o

</dd>

</dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.1.1.10 </span>An image not intended for the user</h6>
</dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.8.1.1.11 </span>An image not intended for the user</h6>

<p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements
for purposes other than showing images.</p>
Expand All @@ -21445,7 +21470,7 @@ <h6 id=a-key-part-of-the-content><span class=secno>4.8.1.1.9 </span>A key part o



<h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.11 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
<h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>

<p><i>This section does not apply to documents that are publicly
accessible, or whose target audience is not necessarily personally
Expand All @@ -21465,30 +21490,6 @@ <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-



<h6 id=general-guidelines><span class=secno>4.8.1.1.12 </span>General guidelines</h6>

<p>The most general rule to consider when writing alternative text
is the following: <strong>the intent is that replacing every image
with the text of its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
not change the meaning of the page</strong>.</p>

<p>So, in general, alternative text can be written by considering
what one would have written had one not been able to include the
image.</p>

<p>A corollary to this is that the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute's value should never
contain text that could be considered the image's <em>caption</em>,
<em>title</em>, or <em>legend</em>. It is supposed to contain
replacement text that could be used by users <em>instead</em> of the
image; it is not meant to supplement the image. The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute can be used for
supplemental information.</p>

<p class=note>One way to think of alternative text is to think
about how you would read the page containing the image to someone
over the phone, without mentioning that there is an image
present. Whatever you say instead of the image is typically a good
start for writing the alternative text.</p>


<div class=impl>

Expand Down

0 comments on commit 9570bdc

Please sign in to comment.