Skip to content
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
Hixie committed Aug 25, 2008
1 parent baab16c commit 0106978eadcbdb88a7da61dcdebacbe7040dffd2
Showing with 67 additions and 14 deletions.
  1. +34 −8 index
  2. +33 −6 source
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:
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
&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>

<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
39 source
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">


</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>

<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.
You can’t perform that action at this time.