Skip to content

Commit

Permalink
[a] (0) More cases of images for authors to worry about (credit: pt)
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@1978 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Aug 4, 2008
1 parent 4e1913d commit 54af79c
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 30 deletions.
115 changes: 93 additions & 22 deletions index
View file
Expand Up @@ -694,28 +694,37 @@
<li><a href="#alt"><span class=secno>4.7.2.1. </span>Requirements
for providing text to act as an alternative for images</a>
<ul class=toc>
<li><a href="#a-phrase"><span class=secno>4.7.2.1.1. </span>A
<li><a href="#a-link"><span class=secno>4.7.2.1.1. </span>A link
containing nothing but the image</a>

<li><a href="#a-phrase"><span class=secno>4.7.2.1.2. </span>A
phrase or paragraph with an alternative graphical representation:
charts, diagrams, graphs, maps, illustrations</a>

<li><a href="#a-short"><span class=secno>4.7.2.1.2. </span>A short
<li><a href="#a-short"><span class=secno>4.7.2.1.3. </span>A short
phrase or label with an alternative graphical representation:
icons</a>
icons, logos</a>

<li><a href="#text-that"><span class=secno>4.7.2.1.3. </span>Text
<li><a href="#text-that"><span class=secno>4.7.2.1.4. </span>Text
that has been rendered to a graphic for typographical effect</a>

<li><a href="#a-graphical"><span class=secno>4.7.2.1.4. </span>A
<li><a href="#a-graphical"><span class=secno>4.7.2.1.5. </span>A
graphical representation of some of the surrounding text</a>

<li><a href="#a-purely"><span class=secno>4.7.2.1.5. </span>A
<li><a href="#a-purely"><span class=secno>4.7.2.1.6. </span>A
purely decorative image that doesn't add any information but is
still specific to the surrounding content</a>

<li><a href="#a-key"><span class=secno>4.7.2.1.6. </span>A key
<li><a href="#a-group"><span class=secno>4.7.2.1.7. </span>A group
of images that form a single larger picture</a>

<li><a href="#a-key"><span class=secno>4.7.2.1.8. </span>A key
part of the content</a>

<li><a href="#an-image"><span class=secno>4.7.2.1.7. </span>An
<li><a href="#an-image"><span class=secno>4.7.2.1.9. </span>An
image not intended for the user</a>

<li><a href="#an-image0"><span class=secno>4.7.2.1.10. </span>An
image in an e-mail or document intended for a specific person who
is known to be able to view images</a>
</ul>
Expand Down Expand Up @@ -15952,7 +15961,28 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
U+007D RIGHT CURLY BRACKET character (}), unless the attribute is giving
the <em>kind</em> of image rather than replacement text.

<h6 id=a-phrase><span class=secno>4.7.2.1.1. </span>A phrase or paragraph
<h6 id=a-link><span class=secno>4.7.2.1.1. </span>A link containing nothing
but the image</h6>

<p>When an image is the sole contents of a link, the image's <code
title=attr-img-alt><a href="#alt0">alt</a></code> attribute must contain
text that conveys the purpose of the link.

<div class=example>
<p>In this example, a user is asked to pick his preferred color from a
list of three. Each color is given by an image, but for users who have
configured their user agent not to display images, the color names are
used instead:</p>

<pre>&lt;h1>Pick your color&lt;/h1>
&lt;ul>
&lt;li>&lt;a href="green.html">&lt;img src="green.jpeg" alt="Green">&lt;/a>&lt;/li>
&lt;li>&lt;a href="blue.html">&lt;img src="blue.jpeg" alt="Blue">&lt;/a>&lt;/li>
&lt;li>&lt;a href="red.html">&lt;img src="red.jpeg" alt="Red">&lt;/a>&lt;/li>
&lt;/ul></pre>
</div>

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

Expand Down Expand Up @@ -16017,8 +16047,8 @@ There is a small mailbox here.
<p>It is important to realize that the alternative text is a
<em>replacement</em> for the image, not a description of the image.

<h6 id=a-short><span class=secno>4.7.2.1.2. </span>A short phrase or label
with an alternative graphical representation: icons</h6>
<h6 id=a-short><span class=secno>4.7.2.1.3. </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 a glance.
Expand Down Expand Up @@ -16074,12 +16104,13 @@ iPhones' Apple logos are.&lt;/p>
particular entity such as a company, organization, project, band, software
package, country, or some such.

<p>If the logo is being used to represent the entity, the <code
title=attr-img-alt><a href="#alt0">alt</a></code> attribute must contain
the name of the entity being represented by the logo. The <code
title=attr-img-alt><a href="#alt0">alt</a></code> attribute must
<em>not</em> contain text like the word "logo", as it is not the fact that
it is a logo that is being conveyed, it's the entity itself.
<p>If the logo is being used to represent the entity, e.g. as a page
header, the <code title=attr-img-alt><a href="#alt0">alt</a></code>
attribute must contain the name of the entity being represented by the
logo. The <code title=attr-img-alt><a href="#alt0">alt</a></code>
attribute must <em>not</em> contain text like the word "logo", as it is
not the fact that it is a logo that is being conveyed, it's the entity
itself.

<p>If the logo is being used next to the name of the entity that it
represents, then the logo is supplemental, and its <code
Expand Down Expand Up @@ -16139,7 +16170,7 @@ at least that would look good on the cover of a blue book.&lt;/p></pre>
been there in the first place.</p>
</div>

<h6 id=text-that><span class=secno>4.7.2.1.3. </span>Text that has been
<h6 id=text-that><span class=secno>4.7.2.1.4. </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
Expand All @@ -16160,7 +16191,7 @@ at least that would look good on the cover of a blue book.&lt;/p></pre>
<pre>&lt;h1></pre>
<img alt="Earth Day" src=earthdayheader.png></div>

<h6 id=a-graphical><span class=secno>4.7.2.1.4. </span>A graphical
<h6 id=a-graphical><span class=secno>4.7.2.1.5. </span>A graphical
representation of some of the surrounding text</h6>

<p>In many cases, the image is actually just supplementary, and its
Expand Down Expand Up @@ -16193,7 +16224,7 @@ Standards mode, and about 9% triggered the Standards mode.&lt;/p>
doesn't make the page any less useful, but including the image makes it a
lot easier for users of visual browsers to understand the concept.

<h6 id=a-purely><span class=secno>4.7.2.1.5. </span>A purely decorative
<h6 id=a-purely><span class=secno>4.7.2.1.6. </span>A purely decorative
image that doesn't add any information but is still specific to the
surrounding content</h6>

Expand Down Expand Up @@ -16229,7 +16260,36 @@ The island of Shalott.&lt;/p></pre>
scheme, the image should be specified in the site's CSS, not in the markup
of the document.

<h6 id=a-key><span class=secno>4.7.2.1.6. </span>A key part of the content</h6>
<h6 id=a-group><span class=secno>4.7.2.1.7. </span>A group of images that
form a single larger picture</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 the images
must its <code title=attr-img-alt><a href="#alt0">alt</a></code> attribute
set as per the relevant rules that would be appropriate for the picture as
a whole, and then all the remaining images must have their <code
title=attr-img-alt><a href="#alt0">alt</a></code> attribute set to the
empty string.

<div class=example>
<p>In the following example, a picture representing a company logo for
<span title="">XYZ Corp</span> has been split into two pieces, the first
containing the letters "XYZ" and the second with the word "Corp". The
alternative text ("XYZ Corp") is all in the first image.</p>

<pre>&lt;h1>&lt;img src="logo1.png" alt="XYZ Corp">&lt;img src="logo2.png" alt="">&lt;/h1></pre>
</div>

<p>If any of the components of the sliced picture are the sole contents of
links, then instead one image per link must have alternative text
representing the purpose of the link.

<p>Generally, authors should avoid slicing images in this way, as it can
lead to unexpected renderings (e.g. if the line wraps in an unexpected
way, the image would get broken up). In the case of links, <a
href="#image2" title="image map">image maps</a> should be used instead.

<h6 id=a-key><span class=secno>4.7.2.1.8. </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 part of a photo gallery. The
Expand Down Expand Up @@ -16337,7 +16397,18 @@ href="?audio">audio&lt; test instead.)&lt;/p></pre>
than replacement text when no alternative text is available and none can
be made available, e.g. on automated image gallery sites.

<h6 id=an-image><span class=secno>4.7.2.1.7. </span>An image in an e-mail
<h6 id=an-image><span class=secno>4.7.2.1.9. </span>An image not intended
for the user</h6>

<p>If an <code><a href="#img">img</a></code> element is being used for
purposes other than showing an image, e.g. as part of a service to count
page views, then the <code title=attr-img-alt><a
href="#alt0">alt</a></code> attribute must be the empty string.

<p>Generally authors should avoid using <code><a href="#img">img</a></code>
elements for purposes other than showing images.

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

Expand Down
88 changes: 80 additions & 8 deletions source
View file
Expand Up @@ -13513,6 +13513,30 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
the <em>kind</em> of image rather than replacement text.</p>


<h6>A link containing nothing but the image</h6>

<p>When an image is the sole contents of a link, the image's <code
title="attr-img-alt">alt</code> attribute must contain text that
conveys the purpose of the link.</p>

<div class="example">

<p>In this example, a user is asked to pick his preferred color
from a list of three. Each color is given by an image, but for
users who have configured their user agent not to display images,
the color names are used instead:</p>

<pre>&lt;h1>Pick your color&lt;/h1>
&lt;ul>
&lt;li>&lt;a href="green.html">&lt;img src="green.jpeg" alt="Green">&lt;/a>&lt;/li>
&lt;li>&lt;a href="blue.html">&lt;img src="blue.jpeg" alt="Blue">&lt;/a>&lt;/li>
&lt;li>&lt;a href="red.html">&lt;img src="red.jpeg" alt="Red">&lt;/a>&lt;/li>
&lt;/ul></pre>

</div>



<h6>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
Expand Down Expand Up @@ -13585,7 +13609,7 @@ There is a small mailbox here.
image.</p>


<h6>A short phrase or label with an alternative graphical representation: icons</h6>
<h6>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 @@ -13647,12 +13671,12 @@ iPhones' Apple logos are.&lt;/p>
stand for a particular entity such as a company, organization,
project, band, software package, country, or some such.</p>

<p>If the logo is being used to represent the entity, the <code
title="attr-img-alt">alt</code> attribute must contain the name of
the entity being represented by the logo. The <code
title="attr-img-alt">alt</code> attribute must <em>not</em>
contain text like the word "logo", as it is not the fact that it
is a logo that is being conveyed, it's the entity itself.</p>
<p>If the logo is being used to represent the entity, e.g. as a page
header, the <code title="attr-img-alt">alt</code> attribute must
contain the name of the entity being represented by the logo. The
<code title="attr-img-alt">alt</code> attribute must <em>not</em>
contain text like the word "logo", as it is not the fact that it is
a logo that is being conveyed, it's the entity itself.</p>

<p>If the logo is being used next to the name of the entity that
it represents, then the logo is supplemental, and its <code
Expand Down Expand Up @@ -13786,7 +13810,7 @@ Standards mode, and about 9% triggered the Standards mode.&lt;/p>
text, but it has some relevance. Such images are decorative, but
still form part of the content. In these cases, the <code
title="attr-img-alt">alt</code> attribute must be present but its
value must be the empty string.
value must be the empty string.</p>

<div class="example">

Expand Down Expand Up @@ -13817,6 +13841,41 @@ The island of Shalott.&lt;/p></pre>
not in the markup of the document.</p>



<h6>A group of images that form a single larger picture</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
the images must its <code title="attr-img-alt">alt</code> attribute
set as per the relevant rules that would be appropriate for the
picture as a whole, and then all the remaining images must have
their <code title="attr-img-alt">alt</code> attribute set to the
empty string.</p>

<div class="example">

<p>In the following example, a picture representing a company logo
for <span title="">XYZ Corp</span> has been split into two pieces,
the first containing the letters "XYZ" and the second with the word
"Corp". The alternative text ("XYZ Corp") is all in the first
image.</p>

<pre>&lt;h1>&lt;img src="logo1.png" alt="XYZ Corp">&lt;img src="logo2.png" alt="">&lt;/h1></pre>

</div>

<p>If any of the components of the sliced picture are the sole
contents of links, then instead one image per link must have
alternative text representing the purpose of the link.</p>

<p>Generally, authors should avoid slicing images in this way, as it
can lead to unexpected renderings (e.g. if the line wraps in an
unexpected way, the image would get broken up). In the case of
links, <span title="image map">image maps</span> should be used
instead.</p>



<h6>A key part of the content</h6>

<p>In some cases, the image is a critical part of the
Expand Down Expand Up @@ -13939,6 +13998,19 @@ href="?audio">audio&lt; test instead.)&lt;/p></pre>
available, e.g. on automated image gallery sites.</p>



<h6>An image not intended for the user</h6>

<p>If an <code>img</code> element is being used for purposes other
than showing an image, e.g. as part of a service to count page
views, then the <code title="attr-img-alt">alt</code> attribute must
be the empty string.</p>

<p>Generally authors should avoid using <code>img</code> elements
for purposes other than showing images.</p>



<h6>An image in an e-mail or document intended for a specific person who is known to be able to view images</h6>

<p>When an image is included in a communication (such as an HTML
Expand Down

0 comments on commit 54af79c

Please sign in to comment.