Bugzilla – Bug 297
Mention the <button><img></button> case. (credit: w)
Last modified: 2009-11-23 17:16:59 CET
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><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> @@ -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">