HTML Standard Tracker

Diff (omit for latest revision)
Filter

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

File a bug

SVNBugCommentTime (UTC)
2113[Authors] [Conformance Checkers] Mention the <button><img></button> case. (credit: w)2008-08-25 01:00
Index: source
===================================================================
--- source	(revision 2112)
+++ source	(revision 2113)
@@ -13941,11 +13941,13 @@
   the <em>kind</em> of image rather than replacement text.</p>
 
 
-  <h6>A link containing nothing but the image</h6>
+  <h6>A link or button 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>
+  <p>When an <span>a</span> element that is a <span>hyperlink</span>,
+  or a <code>button</code> element, has no textual content but
+  contains one or more images, the <code
+  title="attr-img-alt">alt</code> attributes must contain text that
+  together convey the purpose of the link or button.</p>
 
   <div class="example">
 
@@ -13963,8 +13965,32 @@
 
   </div>
 
+  <div class="example">
 
+   <p>In this example, each button has a set of images to indicate the
+   kind of color output desired by the user. The first image is used
+   in each case to give the alternative text.</p>
 
+   <pre>&lt;button name="rgb"><strong>&lt;img src="red" alt="RGB">&lt;img src="green" alt="">&lt;img src="blue" alt=""></strong>&lt;/button>
+&lt;button name="cmyk"><strong>&lt;img src="cyan" alt="CMYK">&lt;img src="magenta" alt="">&lt;img src="yellow" alt="">&lt;img src="black" alt=""></strong>&lt;/button></pre>
+
+   <p>Since each image represents one part of the text, it could also
+   be written like this:</p>
+
+   <pre>&lt;button name="rgb"><strong>&lt;img src="red" alt="R">&lt;img src="green" alt="G">&lt;img src="blue" alt="B"></strong>&lt;/button>
+&lt;button name="cmyk"><strong>&lt;img src="cyan" alt="C">&lt;img src="magenta" alt="M">&lt;img src="yellow" alt="Y">&lt;img src="black" alt="K"></strong>&lt;/button></pre>
+
+   <p>However, with other alternative text, this might not work, and
+   putting all the alternative text into one image in each case might
+   make more sense:</p>
+
+   <pre>&lt;button name="rgb"><strong>&lt;img src="red" alt="sRGB profile">&lt;img src="green" alt="">&lt;img src="blue" alt=""></strong>&lt;/button>
+&lt;button name="cmyk"><strong>&lt;img src="cyan" alt="CMYK profile">&lt;img src="magenta" alt="">&lt;img src="yellow" alt="">&lt;img src="black" alt=""></strong>&lt;/button></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
@@ -14360,8 +14386,9 @@
 
   <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>
+  per link must have alternative text in its <code
+  title="attr-img-alt">alt</code> attribute representing the purpose
+  of the link.</p>
 
   <div class="example">
 

|