- From: poot <cvsmail@w3.org>
- Date: Mon, 17 May 2010 23:07:08 +0900 (JST)
- To: public-html-diffs@w3.org
steve: added and updated techniques 8.3 and 11.2
http://dev.w3.org/cvsweb/html5/alt-techniques/Overview.html?r1=1.24&r2=1.25&f=h
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.24
retrieving revision 1.25
diff -u -d -r1.24 -r1.25
--- Overview.html 11 May 2010 10:18:03 -0000 1.24
+++ Overview.html 17 May 2010 14:06:45 -0000 1.25
@@ -237,14 +237,14 @@
</head>
<body>
<h1>HTML5: Techniques for providing useful text alternatives</h1>
-<h2>Editor's Draft 11th May 2010</h2>
+<h2>Editor's Draft 17th May 2010</h2>
<h3>Editor:</h3>
<p><a href="mailto:sfaulkner@paciellogroup.com">Steve Faulkner</a>, The Paciello Group.</p>
<hr>
<H2>Abstract</H2>
<p>This document contains author conformance requirements for use of the alt attribute in HTML5 and best practice guidance for authors of HTML documents on providing text alternatives for images. </p>
<H3>Status of This document</H3>
-<p>This document is for review by the HTML and Protocols & Formats working groups and other interested people. It is subject to change without notice. This document has no formal standing within W3C. The basis of the current content is from sections <A title="4.8.2.1.1" href="http://dev.w3.org/html5/spec/text-level-semantics.html#a-link-or-button-containing-nothing-but-the-image">4.8.2.1.1</A> to <A title="4.8.2.1.11" href="http://dev.w3.org/html5/spec/text-level-semantics.html#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images">4.8.2.1.11</A> of the HTML5 specification and the <A href="http://www.paciellogroup.com/blog/misc/uc/">text produced</A> for <A href="http://www.w3.org/html/wg/tracker/actions/54">Action 54</A> in the HTML issue tracker.</p>
+<p>This document is for review by the HTML and Protocols & Formats working groups and other interested people. <span class="warning">It is subject to change without notice. This document currently has no formal standing within W3C.</span> The basis of the current content is from sections <A title="4.8.2.1.1" href="http://dev.w3.org/html5/spec/text-level-semantics.html#a-link-or-button-containing-nothing-but-the-image">4.8.2.1.1</A> to <A title="4.8.2.1.11" href="http://dev.w3.org/html5/spec/text-level-semantics.html#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images">4.8.2.1.11</A> of the HTML5 specification and the <A href="http://www.paciellogroup.com/blog/misc/uc/">text produced</A> for <A href="http://www.w3.org/html/wg/tracker/actions/54">Action 54</A> in the HTML issue tracker.</p>
<h2>Table of Contents</h2>
<ul>
<li><a href="#intro">Introduction</a>
@@ -336,9 +336,10 @@
<li>Semantic structure cannot be added to alt attribute content.</li>
</ul>
<h6>Using an empty <code>alt</code> attribute <code>alt=""</code></h6>
+<p class="note">To do</p>
<h6>How long should a short text alternative be?</h6>
<p>The answer to this question very much depends on the context an image is being used in. While there are no definitive right or wrong lengths for text alternatives provided using the <code>img</code> elements <code>alt</code> attribute, the general consensus is that if the text alternative is longer than 75-100 characters (1 to 2 sentences), it should not be considered a short text alternative and should not be presented using the <code>alt </code>attribute.</p>
-<h3> </h3>
+<p><span class="note">To do</span></p>
<h3>The <code>figure</code> and <code>figcaption</code> elements</h3>
<p><span class="note">to do</span></p>
<h5>Advantages:</h5>
@@ -498,21 +499,7 @@
<p>If the lamp doesn't work; check if it's plugged in. If not,
plug it in. If it's plugged in and still doesn't work; check if the bulb
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.</p>
-</div>
-
-</pre>
-
- <h5>Advantages:</h5>
- <ul>
- <li>Robust support in most user agents and assistive technologies.</li>
- <li>Text alternative is explicitly associated with the image.</li>
- <li>Text alternative is available to all users.</li>
- </ul>
- <h5>Disadvantages:</h5>
- <ul>
- <li>Text alternative takes up visual display space.</li>
- <li>The target of the link is not apparent to users who can view the image unless they can use a mouse and view the title attribute content.</li>
- </ul>
+</div></pre>
</div>
<h4>Example 2.3</h4>
<div class="example">
@@ -851,6 +838,21 @@
</pre>
</div>
+<h4>Example 8.3</h4>
+<div class="example">
+ <p>In this example, we have a warning message, with a warning icon. The word "Warning!" is in emphasized text next the the icon. In this case the icon is redundant and therefore the <code>img </code>element MUST have an empty <code>alt</code> attribute. It would also be appropriate to add the icon using CSS.</p>
+ <p><strong>Example Image in context: </strong></p>
+ <div class="element1">
+ <p><img src="images/warning.gif" alt="Warning!" width="38" height="30"> <strong>Warning!</strong> Your session is about to expire.</p>
+ </div>
+ <p><strong>Example code:</strong></p>
+ <pre>
+<p><img src="warning.gif" width="15" height="15" <strong>alt=""</strong>>
+<strong>Warning!</strong>
+Your session is about to expire</p>
+
+</pre>
+</div>
<p> </p>
<h4>Related techniques and resources</h4>
<p><span class="note">to do</span></p>
@@ -1028,16 +1030,17 @@
</pre>
</div>
-<h4>Example 11.1</h4>
+<h4>Example 11.2</h4>
<div class="example">
- <p>In this example, a picture representing a company logo for the <SPAN title="">PIP Corporation</SPAN> has been split into two pieces, the first containing the word "PIP" and the second with the abbreviated word "CO". The alternative text ("PIP CO") is all in the first image.</p>
+ <p>In this example, a picture representing a company logo for the <SPAN title="">PIP Corporation</SPAN> has been split into two pieces, the first containing the word "PIP" and the second with the abbreviated word "CO". The images are the sole content of a link to the PIPCO home page. In this case the text alternative MUST be a description of the link target. The alternative text ("PIP CO home") is all in the first image. </p>
<p><strong>Example Image:</strong></p>
<div class="element1">
- <p><img src="images/pip.gif" alt="PIP CO" width="99" height="64" style="border:none"><img src="images/co.gif" alt="" style="border:none" width="103" height="64"></p>
+ <p><a href="#"><img src="images/pip.gif" alt="PIP CO" width="99" height="64" style="border:none"><img src="images/co.gif" alt="" style="border:none" width="103" height="64"></a></p>
</div>
<p><strong>Example code:</strong></p>
<pre>
-<h1><img src="pip.gif" <strong>alt="PIP CO"</strong>><img src="co.gif" <strong>alt=""</strong>></h1>
+<h1><a href="pipco-home.html">
+<img src="pip.gif" <strong>alt="PIP CO home"</strong>><img src="co.gif" <strong>alt=""</strong>></a></h1>
</pre>
</div>
Received on Monday, 17 May 2010 14:07:37 UTC