HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
2113[Authors] [Conformance Checkers] Mention the <button><img></button> case. (credit: w)2008-08-25 01:00
@@ -13934,42 +13934,68 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
   attribute depend on what the image is intended to represent, as
   described in the following sections.</p>
 
   <p>A general requirement that applies in all cases is that the <code
   title="attr-img-alt">alt</code> attribute's value must not start
   with a U+007B LEFT CURLY BRACKET character ({) and end with a U+007D
   RIGHT CURLY BRACKET character (}), unless the attribute is giving
   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">
 
    <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"><strong>&lt;img src="green.jpeg" alt="Green"></strong>&lt;/a>&lt;/li>
  &lt;li>&lt;a href="blue.html"><strong>&lt;img src="blue.jpeg" alt="Blue"></strong>&lt;/a>&lt;/li>
  &lt;li>&lt;a href="red.html"><strong>&lt;img src="red.jpeg" alt="Red"></strong>&lt;/a>&lt;/li>
 &lt;/ul></pre>
 
   </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
   form, for example as a flowchart, a diagram, a graph, or a simple
   map showing directions. In such cases, an image can be given using
   the <code>img</code> element, but the lesser textual version must
   still be given, so that users who are unable to view the image
   (e.g. because they have a very slow connection, or because they
@@ -14353,22 +14379,23 @@ The island of Shalott.&lt;/p></pre>
 
 
 
   <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>
+  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">
 
    <p>In the following example, a picture representing the flying
    spaghetti monster emblem, with each of the left noodly appendages
    and the right noodly appendages in different images, so that the
    user can pick the left side or the right side in an adventure.</p>
 
    <pre>&lt;h1>The Church&lt;/h1>
 &lt;p>You come across a flying spaghetti monster. Which side of His

|