[html5] r2113 - [ac] (0) Mention the <button><img></button> case. (credit: w)

whatwg at whatwg.org whatwg at whatwg.org
Sun Aug 24 18:00:06 PDT 2008


Author: ianh
Date: 2008-08-24 18:00:02 -0700 (Sun, 24 Aug 2008)
New Revision: 2113

Modified:
   index
   source
Log:
[ac] (0) Mention the <button><img></button> case. (credit: w)

Modified: index
===================================================================
--- index	2008-08-23 10:01:06 UTC (rev 2112)
+++ index	2008-08-25 01:00:02 UTC (rev 2113)
@@ -28,7 +28,7 @@
 
    <h1 id=html-5>HTML 5</h1>
 
-   <h2 class="no-num no-toc" id=draft>Draft Recommendation — 23 August
+   <h2 class="no-num no-toc" id=draft>Draft Recommendation — 25 August
     2008</h2>
 
    <p>You can take part in this work. <a
@@ -783,7 +783,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:
@@ -16437,12 +16437,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
@@ -16458,6 +16460,28 @@
 </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><button name="rgb"><strong><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></strong></button>
+<button name="cmyk"><strong><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></strong></button></pre>
+
+   <p>Since each image represents one part of the text, it could also be
+    written like this:</p>
+
+   <pre><button name="rgb"><strong><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></strong></button>
+<button name="cmyk"><strong><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></strong></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><button name="rgb"><strong><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></strong></button>
+<button name="cmyk"><strong><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></strong></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>
@@ -16823,7 +16847,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

Modified: source
===================================================================
--- source	2008-08-23 10:01:06 UTC (rev 2112)
+++ source	2008-08-25 01:00:02 UTC (rev 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><button name="rgb"><strong><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></strong></button>
+<button name="cmyk"><strong><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></strong></button></pre>
+
+   <p>Since each image represents one part of the text, it could also
+   be written like this:</p>
+
+   <pre><button name="rgb"><strong><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></strong></button>
+<button name="cmyk"><strong><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></strong></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><button name="rgb"><strong><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></strong></button>
+<button name="cmyk"><strong><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></strong></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">
 




More information about the Commit-Watchers mailing list