W3C home > Mailing lists > Public > public-html-commits@w3.org > August 2008

html5/spec Overview.html,1.1169,1.1170

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 04 Aug 2008 09:49:20 +0000
To: public-html-commits@w3.org
Message-Id: <E1KPwgq-0002g4-GC@lionel-hutz.w3.org>

Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv10208

Modified Files:
	Overview.html 
Log Message:
More cases of images for authors to worry about (credit: pt) (whatwg r1978)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.1169
retrieving revision 1.1170
diff -u -d -r1.1169 -r1.1170
--- Overview.html	4 Aug 2008 09:13:12 -0000	1.1169
+++ Overview.html	4 Aug 2008 09:49:17 -0000	1.1170
@@ -789,28 +789,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>
@@ -16047,7 +16056,28 @@
    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>
 
@@ -16112,8 +16142,8 @@
   <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.
@@ -16169,12 +16199,13 @@
    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
@@ -16234,7 +16265,7 @@
     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
@@ -16255,7 +16286,7 @@
    <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
@@ -16288,7 +16319,7 @@
    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>
 
@@ -16324,7 +16355,36 @@
    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
@@ -16432,7 +16492,18 @@
    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>
 
Received on Monday, 4 August 2008 09:49:57 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 9 October 2008 20:32:58 GMT