html5/alt-techniques Overview.html,1.51,1.52

Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv2889

Modified Files:
	Overview.html 
Log Message:
added example 2.5 structured text alternative and added info about what a text alternative is.

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.51
retrieving revision 1.52
diff -u -d -r1.51 -r1.52
--- Overview.html	29 Jun 2010 15:09:11 -0000	1.51
+++ Overview.html	6 Jul 2010 15:23:25 -0000	1.52
@@ -34,9 +34,48 @@
    table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
    blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
  
-   
+   table {
+
+	border-collapse: collapse;
+
+	border: 1px solid #630;	
+	
+font: normal 90% arial, Verdana, helvetica, sans-serif;
+width:100%;
+}
+
+
+
+th, td
+
+{
+
+	text-align: left;
+
+	vertical-align: top;
+
+	padding: 0.3em;
+
+	border: 1px solid #630;
+
+}
+
+td h1 {font-size:85%;margin:0 0 0 0;}
+td p {margin:0 0 0 0;}
+thead th, thead td
+
+{
+
+	font-weight: bold;
+
+	text-align: center;
+
+}
  
-  
+  caption {text-align:left;
+  font-size:small;
+  font-family:Arial, Helvetica, sans-serif;
+  }
  
    h2 { page-break-before: always; }
    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
@@ -102,6 +141,16 @@
 }
 .element1 {width:400px;}
 .warning2 {color: red; background: transparent; }
+.figure {
+	border: 1px solid #000;
+	padding-left: 1em;
+}
+
+p.figure {
+	border: 1px solid #000;
+	padding: 1em;
+}
+
 
  </style>
 <!--   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD"> -->
@@ -109,7 +158,7 @@
  </head>
 <body>
 <div class="head"><p><a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C"></a></p><h1 class="title" id="title">HTML5:  Techniques for providing useful text alternatives</h1>
-<h2 id="w3c-working-draft-05-may-2010"><acronym title="World Wide Web Consortium">W3C</acronym> Editor's Draft 29 June 2010</h2>
+<h2 id="w3c-working-draft-05-may-2010"><acronym title="World Wide Web Consortium">W3C</acronym> Editor's Draft 6 July 2010</h2>
 <dl><!-- <dt>This version:</dt>
 <dd><a href="http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/">http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/</a></dd><dt>Latest published version:</dt> -->
   <!-- <dd><A href="http://www.w3.org/TR/html-alt-techniques/">http://www.w3.org/TR/html-alt-techniques/</A> </dd> --><dt>Latest editor's draft:</dt><dd><a href="http://dev.w3.org/html5/alt-techniques/">http://dev.w3.org/html5/alt-techniques/</a></dd>
@@ -237,16 +286,17 @@
   <li>Semantic structure cannot be added to alt attribute content.</li>
 </ul>
 <h6 id="replacement">Is alt attribute content a replacement for an image?</h6>
-<p>The answer to this question depends on the context an image is being used in:</p>
+<p>The answer to this question depends on the content of the image and the context the image is being used in:</p>
 <ul>
-  <li>When an image contains too much information to use the alt attribute as a container for a text alternative  the alt attribute content can be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a more complete text alternative that is programmatically associated with the image.</li>
-  <li>When an image contains structured information that cannot be conveyed using the alt attribute as a container for a text alternative  the alt attribute content SHOULD be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a more complete text alternative that is programmatically associated with the image.</li>
-  <li>When an image is used to represent text and it is the authors intent the purpose of the using an image of text is to achieve a visual style, the alt attribute content SHOULD be considered as a replacement for the image.</li>
-  <li>When an image is decorative and it is the authors intent that it not convey any information, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored.</li>
-  <li>When It is the authors intent that image is not to be seen by users, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored.</li>
-  <li>When an image is immediately proceeded or preceeded by a text alternative and the image and the text alternative are not complex in nature, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored.</li>
-  <li>When an image is the sole content of a link, the alt attribute content SHOULD be a brief description of the link target.</li>
-  <li class="note">To Do</li>
+  <li>When an image contains too much information to use the alt attribute as a container for a text alternative  the alt attribute content can be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a more complete text alternative that is programmatically associated with the image. Refer to <a href="#haee">Example 2.3</a>.</li>
+  <li>When an image contains structured information that cannot be conveyed using the alt attribute as a container for a text alternative  the <code>alt</code> attribute content SHOULD be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a structured text alternative that is programmatically associated with the image. Refer to <a href="#hag21">Example 2.5</a>.</li>
+  <li>When an image is used to represent text and it is the authors intent the purpose of the using an image of text is to achieve a visual style, the alt attribute content SHOULD be considered as a replacement for the image. Refer to <a href="#img-of-text">Section 3</a>.</li>
+  <li>When an image is decorative and it is the authors intent that it not convey any information, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. Refer to <a href="#decorative">Section 5</a>.</li>
+  <li>When it is the authors intent that image is not to be seen by users, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. Refer to <a href="#img-not-for-user">Section 7</a>.</li>
+  <li>When an image is immediately proceeded or preceeded by a text alternative and the image and the text alternative are not complex in nature, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. <span class="note">to do</span></li>
+  <li>When an image is the sole content of a link, the alt attribute content SHOULD be a brief description of the link target. Refer to <a href="#hba">Example 1.1</a>.</li>
+  <li>When an image is the  content of a link and is immediately proceeded or preceeded by a brief description of the link target, the <code>alt</code> attribute content SHOULD be empty. Refer to <a href="#hba">Example 8.1</a>.</li>
+  <li>When an image is the  content of a link that also contains structured text content, if the text content is a description of the link target, the <code>alt</code> attribute content MAY be empty or a text alternative for the image. If the text content is not a description of the link target, the alt attribute content SHOULD be a brief description of the link target. <a href="#hav">Refer to Example 6.3</a>. <span class="note">to do</span></li>
 </ul>
 <p>&nbsp;</p>
 <h6 id="empty">Using an empty <code>alt</code> attribute <code>alt=&quot;&quot;</code></h6>
@@ -256,7 +306,7 @@
   <li>An image is not meant to be <a href="#img-not-for-user">visible to any user</a>.</li>
   <li>An image consists of text that is repeated as text or a <a href="#icons">graphical symbol</a> whose meaning is conveyed as text, immediately before or after the image.</li>
   <li>The image is part of a <a href="#imgslices">group of images</a> that  form a single larger picture and one of the other images in the group has a text alternative which serves as the text alternative for the single larger picture.</li>
-  <li>The image is included as the content of a link and there is other content included that clearly describes the link target.</li>
+  <li>The image is included as the content of a link and there is <a href="#hav">other content included</a> that clearly describes the link target.</li>
 </ul>
 <p>Circumstances in which <strong>it is not</strong> appropriate to use an empty or null <code>alt</code> attribute:</p>
 <ul>
@@ -468,13 +518,65 @@
 &lt;strong&gt;If the lamp doesn't work:&lt;/strong&gt;<br><strong>&lt;ol&gt;</strong><br>	<strong>&lt;li&gt;</strong>Check if it's plugged in, if not, plug it in.<strong>&lt;/li&gt;</strong><br>	<strong>&lt;li&gt;</strong>If it still doesn't work; check if the bulb is burned out.<br>	If it is, replace the bulb.<strong>&lt;/li&gt;</strong><br>	<strong>&lt;li&gt;</strong>If it still doesn't work; buy a new lamp.<strong>&lt;/li&gt;</strong><br><strong>&lt;/ol&gt;</strong>
 &lt;/div&gt; </pre>
 </div>
+<h4 id="hag21">Example 2.5</h4>
+<div class="example">
+  <p>In this example, there is an image of a chart, It would be inappropriate to provide the information depicted in the chart as a prose text alternative as the information is a data set. Instead a structured text alternative alternative SHOULD be provided. in this case in the form of a data table using the data that is represented in the chart image. </p>
+  <p><strong>Example Image in context:</strong></p>
+  <div class="element1">
+    <p><img src="images/table.gif" width="407" height="341" alt="Bar Chart showing rainfall in millimetres by Country and Season."></p>
+  
+  <table border=1>
+<caption>
+Average rainfall in millimetres  by country and season.
+</caption>
+<tr>
+	<td></td>
+	<th scope="col">UK</th>
+	<th scope="col">Japan</th>
+	<th scope="col">Australia</th>
+</tr>
+<tr>
+	<th scope="row">Spring</th>
+	<td>5.5</td>
+	<td>2.4</td>
+	<td>2</td>
+</tr>
+<tr>
+	<th scope="row">Summer</th>
+	<td>4.5</td>
+	<td>3.4</td>
+	<td>2</td>
+</tr>
+<tr>
+	<th scope="row">Autumn</th>
+	<td>3.5</td>
+	<td>1.8</td>
+	<td>1.5</td>
+</tr>
+<tr>
+	<th scope="row">Winter</th>
+	<td>1.5</td>
+	<td>1.2</td>
+	<td>1</td>
+</tr>
+</table>
+
+  
+  </div>
+  <p><strong>Example Code:</strong><br>
+  </p>
+  <pre>
+&lt;p&gt;&lt;img src="rainchart.gif" <strong>alt="Bar Chart showing average rainfall in millimetres by country and season."</strong><strong></strong>&gt;&lt;/p&gt;
+
+&lt;table&gt;<br>&lt;caption&gt;<br>Rainfall in millimetres by Country and Season.<br>&lt;/caption&gt;<br>&lt;tr&gt;<br> &lt;td&gt;&lt;/td&gt;&lt;th scope=&quot;col&quot;&gt;UK&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Japan&lt;/th&gt;&lt;th scope=&quot;col&quot;&gt;Australia&lt;/th&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>	&lt;th scope=&quot;row&quot;&gt;Spring&lt;/th&gt;&lt;td&gt;5.5&lt;/td&gt;&lt;td&gt;2.4&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>	&lt;th scope=&quot;row&quot;&gt;Summer&lt;/th&gt;&lt;td&gt;4.5&lt;/td&gt;&lt;td&gt;3.4&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>	&lt;th scope=&quot;row&quot;&gt;Autumn&lt;/th&gt;&lt;td&gt;3.5&lt;/td&gt;&lt;td&gt;1.8&lt;/td&gt;&lt;td&gt;1.5&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;tr&gt;<br>	&lt;th scope=&quot;row&quot;&gt;Winter&lt;/th&gt;&lt;td&gt;1.5&lt;/td&gt;&lt;td&gt;1.2&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;</pre>
+</div>
 <h4 id="hah">Related  techniques and resources</h4>
 <ul>
   <li><a href="http://www.w3.org/TR/WCAG-TECHS/G92.html">Providing long description for non-text content that serves the   same                      purpose and presents the same information</a> (WCAG 2.0 Technique)</li>
   <li><a href="http://www.w3.org/TR/WCAG-TECHS/G94.html">Providing short text alternative for non-text content that   serves the same purpose and presents the same information as the   non-text content </a>(WCAG 2.0 Technique)</li>
   <li><a href="http://www.webaim.org/techniques/images/longdesc.php">Creating Accessible Images: Long Descriptions</a> (WebAIM tutorial)</li>
 </ul>
-<h3 id="img-of-text"><span class="secno">3. </span>Images of text</h3>
+<h3 id="img-of-text">3. Images of text</h3>
 <p>Sometimes, an image only contains  text, and the purpose of the image is to display text  using visual effects and /or fonts. While it is <em>strongly</em> recommended that text styled using CSS be used, but if this is not possible, in most of these cases, the content of the <code title="attr-img-alt">alt</code> attribute SHOULD consist of the same text as written in the image itself. </p>
 <h4 id="hai">Example 3.1</h4>
 <div class="example">
@@ -605,7 +707,7 @@
   <div class="element1">
     <p><strong>The Lady of Shalott</strong><br>
         <small>A poem by Alfred Lord Tennyson.</small></p>
-    <p><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" width="271" height="171" alt="Information about this painting inspired by the poem." title="Information about this painting inspired by the poem."></a></p>
+    <p class="figure"><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" width="271" height="171" alt="Information about this painting inspired by the poem." title="Information about this painting inspired by the poem."></a></p>
     <p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
   </div>
   <p><strong>Example code: </strong></p>
@@ -617,7 +719,7 @@
 &lt;!-- Full Recitation of Alfred, Lord Tennyson's Poem.  --&gt;</pre>
   
 </div>
-<h4 id="hav">
+
   <!-- <h4>Example 6.3</h4>
   <div class="example">
     <p>In this example of  the same image a visible text caption is provided using the &lt;figure&gt; and &lt;figcaption&gt; elements.</p>
@@ -635,7 +737,7 @@
 &lt;/figure&gt;
 </pre>
 </div> -->
-  Example 6.3</h4>
+ <h4 id="hav"> Example 6.3</h4>
 <p>This example is similar to the previous example as it also contains a link pointing to an external source of information about the painting. The difference being that  text  is included after the image as content of the link. </p>
 <p><strong>Note:</strong> In HTML5 unlike HTMl 4 <a href="http://html5doctor.com/block-level-links-in-html-5/">links can contain 'block level' elements</a> such as <code>p</code> elements. The example below makes use of this change.</p>
 <div class="example">
@@ -643,8 +745,11 @@
   <div class="element1">
     <p><strong>The Lady of Shalott</strong><br>
         <small>A poem by Alfred Lord Tennyson.</small></p>
-    <p><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" width="302" height="212" alt="Painting of a woman in a white flowing dress, sitting in a small boat."></a></p>
-    <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>
+    <div class="figure">
+      <p><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" width="302" height="212" alt="Painting of a woman in a white flowing dress, sitting in a small boat."></a></p>
+      <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>  </div>
+      <p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
+  
   </div>
   <p><strong>Example code: </strong></p>
   <pre>&lt;hgroup&gt;&lt;h1&gt;The Lady of Shalott&lt;/h1&gt;
@@ -960,7 +1065,7 @@
 </div>
 
 <h3 id="unknown">12. When a text alternative is unknown at the time of publication</h3>
-<p>In some cases an image may be included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum conformance requirement is to provide a caption for the image. The caption SHOULD be provided using  either the <code>figcaption</code> element. The use of <code>figcaption</code> is recommended over the use of the <code>alt</code> attribute as the <code>figcaption</code> element is designed as a container for caption text, while the alt attribute is designed as a container for a text alternative. In practice the <code>alt</code> attribute has and will continue to provide a more generic method for providing information about an image until such times that the <code>figcaption</code> element is well supported in browsers and assistive technologies.</p>
+<p>In some cases an image may be included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum conformance requirement is to provide a caption for the image. The caption MUST be provided using  either the <code>figcaption</code> element or the <code>alt</code> attribute. The use of <code>figcaption</code> is recommended over the use of the <code>alt</code> attribute as the <code>figcaption</code> element is designed as a container for caption text, while the alt attribute is designed as a container for a text alternative. In practice the <code>alt</code> attribute has and will continue to provide a more generic method for providing information about an image until such times that the <code>figcaption</code> element is well supported in browsers and assistive technologies.</p>
 <p class="note">to do</p>
 <h3 id="captcha">13. CAPTCHA Images </h3>
 <p><A title="http://www.w3.org/TR/WCAG20/#atdef" href="http://www.w3.org/TR/WCAG20/#CAPTCHAdef">CAPTCHA</A> stands for   "Completely Automated Public Turing test to tell Computers and Humans Apart".   CAPTCHA images are used for security purposes to confirm that <A title="http://www.w3.org/TR/WCAG20/#contentdef" href="http://www.w3.org/TR/WCAG20/#contentdef">content</A> is being accessed by   a person rather than a computer. This authentication is done through visual   verification of an image. CAPTCHA typically presents an image with characters or   words in it that the user is to re-type. The image is usually distorted and has   some noise applied to it to make the characters difficult to read. </p>

Received on Tuesday, 6 July 2010 15:23:29 UTC