HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/1978

File a bug

SVNBugCommentTime (UTC)
1978[Authors] More cases of images for authors to worry about (credit: pt)2008-08-04 09:49
Index: source
===================================================================
--- source	(revision 1977)
+++ source	(revision 1978)
@@ -13513,6 +13513,30 @@
   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 @@
   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 @@
   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 @@
   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 @@
   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 @@
   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

|