steve: Added the start of webcam techniques and examples

steve: Added the start of webcam techniques and examples

http://dev.w3.org/cvsweb/html5/alt-techniques/Overview.html?r1=1.11&r2=1.12&f=h

===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.11
retrieving revision 1.12
diff -u -d -r1.11 -r1.12
--- Overview.html 13 Apr 2010 15:10:20 -0000 1.11
+++ Overview.html 21 Apr 2010 10:23:43 -0000 1.12
@@ -237,7 +237,7 @@
  </head>
 <body>
 <h1>HTML5:  Techniques for providing useful text alternatives</h1>
-<h2>Editor's Draft 13th April 2010</h2>
+<h2>Editor's Draft 21st April 2010</h2>
 <h3>Editor:</h3>
 <p><a href="mailto:sfaulkner@paciellogroup.com">Steve Faulkner</a>, The Paciello Group.</p>
 <hr>
@@ -277,9 +277,10 @@
       <li><a href="#img-not-for-user">7. An image not intended for the user</a></li>
       <li><a href="#icons">8. Icons and logos</a></li>
       <li><a href="#pictures">9. Images of Pictures</a></li>
-      <li>10</li>
+      <li><a href="#webcam">10. Webcam images</a></li>
       <li>11</li>
-      <li>12. <a href="#captcha">CAPTCHA images</a></li>
+      <li>12</li>
+      <li>13. <a href="#captcha">CAPTCHA images</a></li>
       <li><a href="#glossary">Glossary</a></li>
     </ul>
   </li>
@@ -339,7 +340,7 @@
 </ul>
 <h5>Disadvantages:</h5>
 <ul>
-  <li>The <code>figure</code> and <code>figcaption</code> elements are not currently supported by browsers or assitive technology. </li>
+  <li>The <code>figure</code> and <code>figcaption</code> elements are not currently supported by browsers or assistive technology. </li>
 </ul>
 <p>&nbsp;</p>
 <h3>The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes</h3>
@@ -898,16 +899,40 @@
   <li><a href="http://dev.w3.org/html5/markup/figure.html#figure">The HTML5 <code>figure</code> element</a></li>
   <li><a href="http://dev.w3.org/html5/markup/figcaption.html">The HTML5 <code>figcaption</code> element</a></li>
 </ul>
-<h3>10. A group of images that form a single larger picture with no links</h3>
+<h3>10. Webcam images</h3>
+<p>Webcam images are static images that are automatically updated periodically. Typically the images are from a fixed viewpoint, the images may update on the page automatically as each new image is uploaded from the camera or the user may be required to refresh the page to view an updated image. Examples include  traffic and weather cameras.</p>
+<h4>Example 10.1</h4>
+<p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith house, looking north.</p>
+<div class="example">
+  <p><strong>Image example in context:</strong></p>
+  <div class="element1">
+    
+    <p><img src="images/webcam1.jpg" alt="" width="296" height="225"></p>
+    <p>View from the top of Sopwith house, looking towards North Kingston.</p>
+    <p>This image is updated every hour.</p>
+    <p>View the  <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
+  </div>
+  <p><strong>Code Example:</strong></p>
+  <pre>&lt;figure&gt;   
+&lt;img src="webcam1.jpg" <strong>alt="Sopwith house 21/04/10 taken at 11:51 and 34 seconds."</strong> aria-describedby=&quot;s1&quot;&gt;  
+&lt;figcaption id=&quot;s1&quot;&gt;View from the top of Sopwith house, looking towards north Kingston.&lt;/figcaption&gt;
+&lt;p&gt;This image is updated every hour.&lt;/p&gt;
+&lt;p&gt;View the &lt;a href=&quot;http://news.bbc.co.uk/weather/forecast/4296?area=Kingston&quot;&gt;
+latest weather details&lt;/a&gt; for Kingston upon Thames.&lt;/p&gt;   
+&lt;/figure&gt;  </pre>
+</div>
+<h4>Related  techniques and resources</h4>
+<p><span class="note">to do</span></p>
+<h3>11. A group of images that form a single larger picture with no links</h3>
 <p><span class="note">to do</span></p>
 <p>&nbsp;</p>
-<h3>11. Images that are a  key part of the content</h3>
+<h3>12. Images that are a  key part of the content</h3>
 <p><span class="note">to do</span></p>
-<H3 id="captcha">12. CAPTCHA Images </H3>
+<H3 id="captcha">13. CAPTCHA Images </H3>
 <p><A title="http://www.w3.org/TR/WCAG20/#CAPTCHAdef" 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>
 <p>Provide <A title="http://www.w3.org/TR/WCAG20/#text-altdef" href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</A> that   identify and describe the purpose of the <A title="http://www.w3.org/TR/WCAG20/#non-text-contentdef" href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</A>,   and provide alternative forms of the CAPTCHA using output modes for different   types of sensory perception. For instance provide an audio alternative along   with the visual image. Locate the audio option right next to the visual one.   This helps but is still problematic for people without sound cards, the   deaf-blind, and some low hearing people. Another method is to include a form   that asks a question along with the visual image. This helps but is can be   problematic for people with cognitive impairments. </p>
 <p><span class="warning">Warning: It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. Further information is available in the W3C's <a href="http://www.w3.org/TR/turingtest/">Inaccessibility of CAPTCHA</a>.</span></p>
-<H4>Example 12.1</H4>
+<H4>Example 13.1</H4>
 <p>This example shows a  <a href="http://recaptcha.net/learnmore.html">CAPTCHA test</a> which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content. </p>
 <div class="example">
   <p><strong>Example Image:</strong></p>

Received on Wednesday, 21 April 2010 10:25:10 UTC