NOTE: The current preferred location for bug reports is the GitHub issue tracker.
Bug 297 - Mention the <button><img></button> case. (credit: w)
Mention the <button><img></button> case. (credit: w)
Status: NEW
Product: Validator.nu
Classification: Unclassified
Component: HTML5 schema
HEAD
All All
: P2 normal
Assigned To: Nobody
http://svn.whatwg.org/webapps/source?...
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2008-08-29 11:35 CEST by Henri Sivonen
Modified: 2009-11-23 17:16 CET (History)
0 users

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Henri Sivonen 2008-08-29 11:35:06 CEST
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,6 +13965,30 @@
 
   </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>
@@ -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">