- From: poot <cvsmail@w3.org>
- Date: Fri, 23 Apr 2010 23:48:44 +0900 (JST)
- To: public-html-diffs@w3.org
steve: updated webcam technique added a second example
http://dev.w3.org/cvsweb/html5/alt-techniques/Overview.html?r1=1.17&r2=1.18&f=h
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.17
retrieving revision 1.18
diff -u -d -r1.17 -r1.18
--- Overview.html 21 Apr 2010 16:25:57 -0000 1.17
+++ Overview.html 23 Apr 2010 14:48:26 -0000 1.18
@@ -237,7 +237,7 @@
</head>
<body>
<h1>HTML5: Techniques for providing useful text alternatives</h1>
-<h2>Editor's Draft 21st April 2010</h2>
+<h2>Editor's Draft 23rd April 2010</h2>
<h3>Editor:</h3>
<p><a href="mailto:sfaulkner@paciellogroup.com">Steve Faulkner</a>, The Paciello Group.</p>
<hr>
@@ -902,8 +902,13 @@
<h3 id="webcam">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>This example is fairly typical; the title and a time stamp are included in the image, automatically generated by the webcam software. It would be better if the text information was not included in the image, but as it is part of the image, it is required that it is provided as a text alternative. A caption is also provided using the <code>figure</code> and <code>figcaption</code> elements. As the image is provided to give a visual indication of the current weather near Sopwith House, a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it is impractical to provide such information as a text alternative. The text of the alt attribute is a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software.</p>
-<p><strong>Note: </strong><code>aria-describedby</code> is used to explicitly associate the caption with the image as the <code>figure</code> and <code>figcaption</code> elements are not currently supported.</p>
+<p>This example is fairly typical; the title and a time stamp are included in the image, automatically generated by the webcam software. It would be better if the text information was not included in the image, but as it is part of the image, it is required that it is provided as a text alternative. A caption is also provided using the <code>figure</code> and <code>figcaption</code> elements. As the image is provided to give a visual indication of the current weather near Sopwith House, a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it may be impractical to provide such information as a text alternative. </p>
+<p>The text of the alt attribute includes a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software. The text alternative also includes a description of some aspects of what can be seen in the image which are unchanging, although weather conditions and time of day change. </p>
+<p><strong>Note: </strong></p>
+<ul>
+ <li><code>aria-describedby</code> is used to explicitly associate the caption with the image as the <code>figure</code> and <code>figcaption</code> elements are not currently supported.</li>
+ <li>The timestamp information in the text alternative will need to be updated each time the image is updated, this can be easily be achieved using scripting on the server or client side.</li>
+</ul>
<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>
@@ -917,10 +922,10 @@
<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><figure>
+<pre><figure>
<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
-In the foreground are the safety rails on the flat part of the roof. Nearby ther are low rise industrial buildings,
-beyond those are block of flats. In the distance there's a church steeple."</strong> aria-describedby="s1">
+In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
+beyond are blocks of flats. In the distance there's a church steeple."</strong> aria-describedby="s1">
<figcaption id="s1">View from the top of Sopwith house, looking towards north Kingston.</figcaption>
<p>This image is updated every hour.</p>
<p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
@@ -928,7 +933,8 @@
</figure> </pre>
</div>
<h4>Example 10.2</h4>
-<p class="note">to do</p>
+<p>This example is the same as Example 10.1 except the descriptive part of the text alternative is not in the alt attribute, it is in a paragraph associated with the image using <code>aria-describedby</code>. </p>
+<p><strong>Note: </strong>the <code>aria-describedby</code> attribute on the <code>img</code> element contains 2 <code>id</code> values. That of the image caption and the images longer text alternative. For browsers which support aria-described by this will result in the text content of the referenced elements be joined as the content of the images accessible description.</p>
<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>
@@ -937,18 +943,30 @@
<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>
+ <p><strong>Sopwith House Weather cam image description:</strong></p>
+ <p>In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
+beyond are blocks of flats. In the distance there's a church steeple.</p>
</div>
<p><strong>Code Example:</strong></p>
<pre><figure>
-<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds."</strong> aria-describedby="s1">
+<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds."</strong> <strong>aria-describedby="s1 s2"</strong>>
<figcaption id="s1">View from the top of Sopwith house, looking towards north Kingston.</figcaption>
<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>
+latest weather details</a> for Kingston upon Thames.</p>
+<p><strong>Sopwith House Weather cam image description:</strong></p>
+<strong><p id="s2">In the foreground of the image are the safety rails on the flat part of the roof.
+Nearby there are low rise industrial buildings, beyond are blocks of flats.
+In the distance there's a church steeple.</p></strong>
</figure> </pre>
</div>
<h4>Related techniques and resources</h4>
-<p><span class="note">to do</span></p>
+<ul>
+ <li> <a href="http://www.w3.org/WAI/PF/aria-practices/#DescribedBy"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices 1.0, 4.1.2 Describing</a></li>
+ <LI><A href="http://dev.w3.org/html5/markup/figure.html#figure">The HTML5 figure element</A></LI>
+ <LI><A href="http://dev.w3.org/html5/markup/figcaption.html">The HTML5 figcaption element</A></LI>
+</ul>
+<p> </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> </p>
Received on Friday, 23 April 2010 14:49:14 UTC