[html5] r2112 - [e] (0) Make the broad strokes more obvious in the alt='' section. Also, split t [...]
whatwg at whatwg.org
whatwg at whatwg.org
Sat Aug 23 03:01:08 PDT 2008
Author: ianh
Date: 2008-08-23 03:01:06 -0700 (Sat, 23 Aug 2008)
New Revision: 2112
Modified:
index
source
Log:
[e] (0) Make the broad strokes more obvious in the alt='' section. Also, split the 'sliced image' section in two. (credit: bb)
Modified: index
===================================================================
--- index 2008-08-23 09:48:06 UTC (rev 2111)
+++ index 2008-08-23 10:01:06 UTC (rev 2112)
@@ -804,19 +804,22 @@
still specific to the surrounding content</a>
<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>
+ of images that form a single larger picture with no links</a>
- <li><a href="#a-key"><span class=secno>4.7.2.1.8. </span>A key
+ <li><a href="#a-group0"><span class=secno>4.7.2.1.8. </span>A
+ group of images that form a single larger picture with links</a>
+
+ <li><a href="#a-key"><span class=secno>4.7.2.1.9. </span>A key
part of the content</a>
- <li><a href="#an-image"><span class=secno>4.7.2.1.9. </span>An
+ <li><a href="#an-image"><span class=secno>4.7.2.1.10. </span>An
image not intended for the user</a>
- <li><a href="#an-image0"><span class=secno>4.7.2.1.10. </span>An
+ <li><a href="#an-image0"><span class=secno>4.7.2.1.11. </span>An
image in an e-mail or document intended for a specific person who
is known to be able to view images</a>
- <li><a href="#general"><span class=secno>4.7.2.1.11.
+ <li><a href="#general"><span class=secno>4.7.2.1.12.
</span>General guidelines</a>
</ul>
</ul>
@@ -16474,6 +16477,9 @@
the image specified in the <code title=attr-img-src><a
href="#src">src</a></code> attribute.
+ <p>It is important to realize that the alternative text is a
+ <em>replacement</em> for the image, not a description of the image.
+
<div class=example>
<p>In the following example we have <a
href="images/parsing-model-overview.png">a flowchart</a> in image form,
@@ -16517,9 +16523,6 @@
</p></pre>
</div>
- <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.3. </span>A short phrase or label
with an alternative graphical representation: icons, logos</h6>
@@ -16672,6 +16675,10 @@
title=attr-img-alt><a href="#alt0">alt</a></code> attribute must be
present but its value must be the empty string.
+ <p>In general, an image falls into this category if removing the image
+ 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.
+
<div class=example>
<p>A flowchart that repeats the previous paragraph in graphical form:</p>
@@ -16738,17 +16745,19 @@
<strong><p><img src="rendering-mode-pie-chart.png" alt=""></p></strong></pre>
</div>
- <p>In general, an image falls into this category if removing the image
- 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.6. </span>A purely decorative
image that doesn't add any information but is still specific to the
surrounding content</h6>
- <p>In some cases, the image isn't discussed by the surrounding 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><a
+ <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 design
+ scheme, the image should be specified in the site's CSS, not in the markup
+ of the document.
+
+ <p>However, a decorative image that isn't discussed by the surrounding text
+ still has some relevance can be included in a page using the <code><a
+ href="#img">img</a></code> element. Such images are decorative, but still
+ form part of the content. In these cases, the <code title=attr-img-alt><a
href="#alt0">alt</a></code> attribute must be present but its value must
be the empty string.
@@ -16773,13 +16782,8 @@
The island of Shalott.</p></pre>
</div>
- <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 design
- scheme, the image should be specified in the site's CSS, not in the markup
- of the document.
-
<h6 id=a-group><span class=secno>4.7.2.1.7. </span>A group of images that
- form a single larger picture</h6>
+ 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 the images
@@ -16811,10 +16815,16 @@
><img src="0" alt=""></strong></meter></p></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.
+ <h6 id=a-group0><span class=secno>4.7.2.1.8. </span>A group of images that
+ form a single larger picture with links</h6>
+ <p>Generally, <a href="#image2" title="image map">image maps</a> should be
+ used instead of slicing an image for links.
+
+ <p>However, if an image is indeed sliced and any of the components of the
+ sliced picture are the sole contents of links, then one image per link
+ must have alternative text representing the purpose of the link.
+
<div class=example>
<p>In the following example, a picture representing the flying spaghetti
monster emblem, with each of the left noodly appendages and the right
@@ -16825,14 +16835,12 @@
<p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</p>
<strong><p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a
+ ><img src="fsm-middle.png" alt=""
><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p></strong></pre>
</div>
- <p>Generally, <a href="#image2" title="image map">image maps</a> should be
- used instead of slicing an image for links.
+ <h6 id=a-key><span class=secno>4.7.2.1.9. </span>A key part of the content</h6>
- <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
image is the whole <em>point</em> of the page containing it.
@@ -17052,18 +17060,18 @@
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
+ <h6 id=an-image><span class=secno>4.7.2.1.10. </span>An image not intended
for the user</h6>
+ <p>Generally authors should avoid using <code><a href="#img">img</a></code>
+ elements for purposes other than showing images.
+
<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
+ <h6 id=an-image0><span class=secno>4.7.2.1.11. </span>An image in an e-mail
or document intended for a specific person who is known to be able to view
images</h6>
@@ -17077,7 +17085,7 @@
images, or should the e-mail be forwarded on to other users whose
abilities might not include easily seeing images.
- <h6 id=general><span class=secno>4.7.2.1.11. </span>General guidelines</h6>
+ <h6 id=general><span class=secno>4.7.2.1.12. </span>General guidelines</h6>
<p>The most general rule for writing alternative text is that the intent is
that replacing every image with the text of its <code
Modified: source
===================================================================
--- source 2008-08-23 09:48:06 UTC (rev 2111)
+++ source 2008-08-23 10:01:06 UTC (rev 2112)
@@ -13983,6 +13983,10 @@
same message as the image specified in the <code
title="attr-img-src">src</code> attribute.</p>
+ <p>It is important to realize that the alternative text is a
+ <em>replacement</em> for the image, not a description of the
+ image.</p>
+
<div class="example">
<p>In the following example we have <a
@@ -14032,11 +14036,7 @@
</div>
- <p>It is important to realize that the alternative text is a
- <em>replacement</em> for the image, not a description of the
- image.</p>
-
<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
@@ -14200,6 +14200,11 @@
cases, the <code title="attr-img-alt">alt</code> attribute must be
present but its value must be the empty string.</p>
+ <p>In general, an image falls into this category if removing the
+ image 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.</p>
+
<div class="example">
<p>A flowchart that repeats the previous paragraph in graphical form:</p>
@@ -14268,17 +14273,18 @@
</div>
- <p>In general, an image falls into this category if removing the
- image 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.</p>
-
<h6>A purely decorative image that doesn't add any information but is still specific to the surrounding content</h6>
- <p>In some cases, the image isn't discussed by the surrounding
- text, but it has some relevance. Such images are decorative, but
+ <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
+ design scheme, the image should be specified in the site's CSS,
+ not in the markup of the document.</p>
+
+ <p>However, a decorative image that isn't discussed by the
+ surrounding text still has some relevance can be included in a page
+ using the <code>img</code> element. 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.</p>
@@ -14306,15 +14312,10 @@
</div>
- <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
- design scheme, the image should be specified in the site's CSS,
- not in the markup of the document.</p>
+ <h6>A group of images that form a single larger picture with no links</h6>
- <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 have its <code title="attr-img-alt">alt</code>
@@ -14350,10 +14351,18 @@
</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>
+
+ <h6>A group of images that form a single larger picture with links</h6>
+
+ <p>Generally, <span title="image map">image maps</span> should be
+ used instead of slicing an image for links.</p>
+
+ <p>However, if an image is indeed sliced and any of the components
+ of the sliced picture are the sole contents of links, then one image
+ per link must have alternative text representing the purpose of the
+ link.</p>
+
<div class="example">
<p>In the following example, a picture representing the flying
@@ -14365,15 +14374,13 @@
<p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</p>
<strong><p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a
+ ><img src="fsm-middle.png" alt=""
><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p></strong></pre>
</div>
- <p>Generally, <span title="image map">image maps</span> should be
- used instead of slicing an image for links.</p>
-
<h6>A key part of the content</h6>
<p>In some cases, the image is a critical part of the
@@ -14635,16 +14642,16 @@
<h6>An image not intended for the user</h6>
+ <p>Generally authors should avoid using <code>img</code> elements
+ for purposes other than showing images.</p>
+
<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
More information about the Commit-Watchers
mailing list