Browse files

[a] (0) More cases of images for authors to worry about (credit: pt)

git-svn-id: http://svn.whatwg.org/webapps@1978 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 4e1913d commit 54af79ce4eba992421eea25a44ee876157eafac2 @Hixie Hixie committed Aug 4, 2008
Showing with 173 additions and 30 deletions.
  1. +93 −22 index
  2. +80 −8 source
View
115 index
@@ -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>
@@ -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>
@@ -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.
@@ -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
@@ -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
@@ -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
@@ -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>
@@ -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
@@ -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>
View
88 source
@@ -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
@@ -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
@@ -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
@@ -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">
@@ -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
@@ -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

0 comments on commit 54af79c

Please sign in to comment.