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

html5/spec Overview.html,1.1285,1.1286

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 25 Aug 2008 00:59:51 +0000
To: public-html-commits@w3.org
Message-Id: <E1KXQQx-0005Rq-S3@lionel-hutz.w3.org>

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

Modified Files:
	Overview.html 
Log Message:
Mention the <button><img></button> case. (credit: w) (whatwg r2113)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.1285
retrieving revision 1.1286
diff -u -d -r1.1285 -r1.1286
--- Overview.html	23 Aug 2008 10:00:52 -0000	1.1285
+++ Overview.html	25 Aug 2008 00:59:49 -0000	1.1286
@@ -27,7 +27,7 @@
     for HTML and XHTML</h2>
 
    <h2 class="no-num no-toc" id=editors0><!-- "W3C Working Draft" -->
-    Editor's Draft <!--ZZZ-->23 August 2008</h2>
+    Editor's Draft <!--ZZZ-->25 August 2008</h2>
 
    <dl><!-- ZZZ: update the month/day
     <dt>This Version:</dt>
@@ -199,7 +199,7 @@
 
   <p>The W3C <a href="http://www.w3.org/html/wg/">HTML Working Group</a> is
    the W3C working group responsible for this specification's progress along
-   the W3C Recommendation track. <!--ZZZ:--> This specification is the 23
+   the W3C Recommendation track. <!--ZZZ:--> This specification is the 25
    August 2008 <!--ZZZ "Working Draft"-->Editor's Draft. <!--:ZZZ--></p>
   <!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST -->
   <!-- relationship to other work (required) -->
@@ -791,7 +791,7 @@
           for providing text to act as an alternative for images</a>
           <ul class=toc>
            <li><a href="#a-link"><span class=secno>4.7.2.1.1. </span>A link
-            containing nothing but the image</a>
+            or button 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:
@@ -16445,12 +16445,14 @@
    U+007D RIGHT CURLY BRACKET character (}), unless the attribute is giving
    the <em>kind</em> of image rather than replacement text.
 
-  <h6 id=a-link><span class=secno>4.7.2.1.1. </span>A link containing nothing
-   but the image</h6>
+  <h6 id=a-link><span class=secno>4.7.2.1.1. </span>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><a href="#alt0">alt</a></code> attribute must contain
-   text that conveys the purpose of the link.
+  <p>When an <a href="#a">a</a> element that is a <a
+   href="#hyperlinks">hyperlink</a>, or a <code>button</code> element, has no
+   textual content but contains one or more images, the <code
+   title=attr-img-alt><a href="#alt0">alt</a></code> attributes must contain
+   text that together convey the purpose of the link or button.
 
   <div class=example>
    <p>In this example, a user is asked to pick his preferred color from a
@@ -16466,6 +16468,28 @@
 &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 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>
@@ -16831,7 +16855,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.
+   must have alternative text in its <code title=attr-img-alt><a
+   href="#alt0">alt</a></code> attribute representing the purpose of the
+   link.
 
   <div class=example>
    <p>In the following example, a picture representing the flying spaghetti
Received on Monday, 25 August 2008 01:00:26 GMT

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