Permalink
Browse files

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

git-svn-id: http://svn.whatwg.org/webapps@2113 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent baab16c commit 0106978eadcbdb88a7da61dcdebacbe7040dffd2 @Hixie Hixie committed Aug 25, 2008
Showing with 67 additions and 14 deletions.
  1. +34 −8 index
  2. +33 −6 source
View
42 index
@@ -28,7 +28,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 23 August
+ <h2 class="no-num no-toc" id=draft>Draft Recommendation &mdash; 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 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
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 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
&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>
@@ -16823,7 +16847,9 @@ The island of Shalott.&lt;/p></pre>
<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
View
39 source
@@ -13941,11 +13941,13 @@ the time Marco had stuck his tongue out...&lt;/p></pre>
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 @@ the time Marco had stuck his tongue out...&lt;/p></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>
@@ -14360,8 +14386,9 @@ The island of Shalott.&lt;/p></pre>
<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">

0 comments on commit 0106978

Please sign in to comment.