Skip to content

Commit

Permalink
[ac] (0) Mention the <button><img></button> case. (credit: w)
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@2113 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Aug 25, 2008
1 parent baab16c commit 0106978
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 14 deletions.
42 changes: 34 additions & 8 deletions index
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand Down
39 changes: 33 additions & 6 deletions source
View file
Expand Up @@ -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">

Expand All @@ -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>
Expand Down Expand Up @@ -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">

Expand Down

0 comments on commit 0106978

Please sign in to comment.