- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 28 Nov 2011 16:59:02 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv23720
Modified Files:
Overview.html developer.html
Log Message:
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.80
retrieving revision 1.81
diff -u -d -r1.80 -r1.81
--- Overview.html 25 Nov 2011 16:23:14 -0000 1.80
+++ Overview.html 28 Nov 2011 16:59:00 -0000 1.81
@@ -661,7 +661,7 @@
</style><link charset="utf-8" type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED"></head>
<body style="display: inherit;"><div class="head"><p><a href="http://www.w3.org/"><img src="http://www.w3.org/Icons/w3c_home" alt="W3C" width="72" height="48"></a></p><h1 class="title" id="title">HTML5: Techniques for providing useful text alternatives</h1>
-<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 25 November 2011</h2><dl><dt>This version:</dt><dd><a href="http://dev.w3.org/html5/alt-techniques/">http://dev.w3.org/html5/alt-techniques/</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>
+<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 28 November 2011</h2><dl><dt>This version:</dt><dd><a href="http://dev.w3.org/html5/alt-techniques/">http://dev.w3.org/html5/alt-techniques/</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>
<dt>Developer edition:</dt>
<dd><a href="http://dev.w3.org/html5/alt-techniques/developer.html">http://dev.w3.org/html5/alt-techniques/developer.html</a> </dd>
@@ -740,39 +740,29 @@
<li><a href="blue.html"><img src="blue.jpeg" <strong>alt="Blue"</strong>></a></li>
</ul></pre>
</div>
-<h4 id="hac">Example 1.2</h4>
+
+<h4 id="hac3">Example 1.2</h4>
<div class="example">
- <p>In this example, a button has a set of images to indicate the
- kind of color output desired by the user. The first image is used to give the text alternative.</p>
+ <p>In this example, a link contains a logo. The link points to the W3C web site. The text alternative is a brief description of the link target.</p>
<p><strong>Example Rendering:</strong></p>
- <p><img src="images/rgbbutton1.gif" alt="A button with the letters R G B." width="88" height="49"></p>
+ <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" alt="W3C web site" width="72" height="48"></a></abbr></p>
<p><strong>Example code:</strong></p>
- <pre><abbr title="red, green and blue."><button name="rgb">
-<img src="red.jpg" <strong>alt="RGB"</strong>><img src="green.jpg" <strong>alt=""</strong>><img src="blue.jpg" <strong>alt=""</strong>></button>
-</abbr></pre>
- <p>Since each image represents one part of the text, it could also
- be written like this:</p>
- <pre><abbr title="red, green and blue.">
-<button name="rgb"><img src="red.jpg" <strong>alt="R"</strong>><img src="green.jpg" <strong>alt="G"</strong>>
-<img src="blue.jpg" <strong>alt="B"</strong>></button></abbr>
+ <pre>
+<a href="http://w3.org"><br><img src="images/w3c_home.png" width="72" height="48" <strong>alt="W3C web site"</strong>><br></a>
</pre>
- <p>However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.</p>
-</div>
-<h4 id="hac3">Example 1.3</h4>
+
+</div>
+<h4 id="hac31">Example 1.3</h4>
<div class="example">
- <p>In this example, a link contains a logo. The link points to the W3C web site. The text alternative is a brief description of the link target.</p>
+ <p>In this example, a link contains a print preview icon. The link points to the a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.</p>
<p><strong>Example Rendering:</strong></p>
- <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" alt="W3C web site" width="72" height="48"></a></abbr></p>
+ <p><img src="images/preview.png" width="32" height="30" alt="print preview"></p>
<p><strong>Example code:</strong></p>
- <pre><abbr title="World Wide Web Consortium">
-<a href="http://w3.org">
-<img src="images/w3c_home.png" width="72" height="48" <strong>alt="W3C web site"</strong>>
-</a>
-</abbr>
+ <pre>
+<a href="preview.html"><br><img src="images/preview.png" width="32" height="30" <strong>alt="Print preview."</strong>><br></a>
</pre>
+ </div>
-</div>
-
<h4 id="had">Related techniques and resources</h4>
<ul>
<li><a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G196">Using a text alternative on one item within a group of images that describes all items in the group</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
@@ -817,22 +807,21 @@
</div>
<h4 id="haee">Example 2.3</h4>
<div class="example">
- <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> attribute:</p>
+ <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used on the containing <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its description:</p>
<p><strong>Example Code:</strong><br>
</p>
- <pre><p><img src="flowchart.gif" <strong>alt="A flowchart representing a process for dealing with a non-functioning lamp."</strong>
-<strong>aria-describedby="d1"</strong>></p>
-
+ <pre><figure role="group">
+<p><img src="flowchart.gif" <strong>alt="A flowchart representing a process for dealing with a non-functioning lamp."</strong><strong></strong>></p>
<p <strong>id="d1"</strong>>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>
-</pre>
- <h5 id="haf"> </h5>
+<br></figure></pre>
</div>
<h4 id="hag">Example 2.4</h4>
<div class="example">
- <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> attribute. <strong>Note:</strong> The the longer text alternative is structured using an ordered list.</p>
+ <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the containing <code>figure</code> element. </p>
+ <p><strong>Note:</strong> The the longer text alternative is structured using an ordered list.</p>
<p><strong>Example Image in context:</strong></p>
<div class="element1">
<p><img src="images/flowchart.gif" alt="A flowchart process for dealing with a non-functioning lamp." width="221" height="299"></p>
@@ -847,13 +836,12 @@
</div>
<p><strong>Example Code:</strong><br>
</p>
- <pre><p><img src="flowchart.gif" <strong>alt="A flowchart process for dealing with a non-functioning lamp."</strong>
-<strong>aria-describedby="d1"</strong>></p>
-
+ <pre><figure role="group">
+<img src="flowchart.gif" <strong>alt="A flowchart process for dealing with a non-functioning lamp."</strong>>
-<div <strong>id="d1"</strong>>
<strong>If the lamp doesn't work:</strong><br><strong><ol></strong><br> <strong><li></strong>Check if it's plugged in, if not, plug it in.<strong></li></strong><br> <strong><li></strong>If it still doesn't work; check if the bulb is burned out.<br> If it is, replace the bulb.<strong></li></strong><br> <strong><li></strong>If it still doesn't work; buy a new lamp.<strong></li></strong><br><strong></ol></strong>
-</div> </pre>
+
+</figure></pre>
</div>
<h4 id="hag21">Example 2.5</h4>
<div class="example">
@@ -980,8 +968,7 @@
<p <strong>id="d2"</strong>>Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%.</p></pre>
</div>
-<h4 id="haq">Related techniques and resources</h4>
-<p><a href="http://www.w3.org/TR/WCAG-TECHS/H30.html"></a></p>
+
</div>
<div class="section" id="sec5">
<h3 id="decorative"><span class="secno">3.5 </span>A purely decorative image that doesn't add any information</h3>
@@ -1274,7 +1261,7 @@
<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><a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used to add usable semantics to the figure element which also provides a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</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>
@@ -1289,19 +1276,17 @@
<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 <strong>role="group"</strong>>
<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 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>
+beyond are blocks of flats. In the distance there's a church steeple."</strong>>
+<figcaption>View from the top of Sopwith house, looking towards north Kingston. <br>This image is updated every hour.</figcaption>
+</figure><br>
<p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
-latest weather details</a> for Kingston upon Thames.</p>
-</figure> </pre>
+latest weather details</a> for Kingston upon Thames.</p> </pre>
</div>
<h4 id="hbh">Example 10.2</h4>
-<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 that support <code>aria-describedby</code> this will result in the text content of the referenced elements be joined together as the content of the images accessible description:</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 <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
<p>"View from the top of Sopwith house, looking towards north Kingston. 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>
@@ -1310,77 +1295,57 @@
<p><strong>Image example in context:</strong></p>
<div class="element1">
<p><img src="images/webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds." 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>
- <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,
+ <p>View from the top of Sopwith house, looking towards North Kingston. 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>
+ <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><figure>
-<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>
-<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.
+ <pre><figure <strong>role="group"</strong>>
+<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds."</strong><strong></strong>>
+<figcaption>View from the top of Sopwith house, looking towards north Kingston.<br>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>
+In the distance there's a church steeple.</figcaption>
+<p>This image is updated every hour.</p><br></figure><br><br><p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
+latest weather details</a> for Kingston upon Thames.</p> </pre>
</div>
<h4 id="hbi">Example 10.3</h4>
-<p>The previous webcam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. both examples use include the longer text alternative in a paragraph associated with the image using <code>aria-describedby</code>. </p>
+<p>The previous webcam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. Both examples use <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</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>
<div class="element1">
<p><img src="images/webcam1.jpg" alt="Sopwith house weather cam. Includes date and time information indicating when the image was taken." 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>
- <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>
+ <p>View from the top of Sopwith house, looking towards North Kingston. 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. 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 1:</strong></p>
- <pre><figure>
-<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Includes date and time information indicating when the image was taken."</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>
-<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.
+ <pre><figure role="group">
+<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Includes date and time information indicating when the image was taken."</strong><strong></strong>><br><figcaption>View from the top of Sopwith house, looking towards north Kingston<br>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>
+In the distance there's a church steeple.</figcaption>
+<p>This image is updated every hour.</p><br></figure><br><br><p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
+latest weather details</a> for Kingston upon Thames.</p> </figure> </pre>
<p><strong>Code Example 2:</strong></p>
- <pre><figure>
-<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam."</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>
-<p><strong>Sopwith House Weather cam image description:</strong></p>
-<strong><p id="s2"></strong>In the foreground of the image are the safety rails on the flat part of the roof.
+ <pre><figure role="group">
+<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam."</strong>>
+<figcaption id="s1">View from the top of Sopwith house, looking towards north Kingston.<br>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.<strong>
- Across the top of the image is date and time information indicating when it was taken.</p></strong>
-</figure> </pre>
+In the distance there's a church steeple.<strong><br>Across the top of the image is date and time information indicating when it was taken.</strong><br>This image is updated every hour. <br></figcaption>
+</figure>
+<p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
+latest weather details</a> for Kingston upon Thames.</p></pre>
</div>
<h4 id="hbj">Related techniques and resources</h4>
<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> [<cite><a href="#bib-WAI-ARIA-PRACTICES" rel="biblioentry" class="bibref">WAI-ARIA-PRACTICES</a></cite>]</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>
</div>
<div class="section" id="sec11">
-<h3 id="imgslices"><span class="secno">3.11 </span>A group of images that form a single larger picture with and without links</h3>
+<h3 id="imgslices"><span class="secno">3.11 </span>A group of images that form a single larger picture</h3>
<p>When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, one of the images <em title="must" class="rfc2119">must</em> have its alt attribute set as per the relevant rules that would be appropriate for the picture as a whole, and then all the remaining images <em title="must" class="rfc2119">must</em> have an empty alt attribute.</p>
<h4 id="hbii">Example 11.1</h4>
<div class="example">
@@ -1405,15 +1370,34 @@
<pre><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>
+</pre></div>
+ <h4 id="hac">Example 11.3</h4>
+ <div class="example">
+ <p>In this example, a button has a set of images to indicate the
+ kind of color output desired by the user. The first image is used to give the text alternative.</p>
+ <p><strong>Example Rendering:</strong></p>
+ <p><img src="images/rgbbutton1.gif" alt="A button with the letters R G B." width="88" height="49"></p>
+ <p><strong>Example code:</strong></p>
+ <pre><abbr title="red, green and blue."><button name="rgb">
+<img src="red.jpg" <strong>alt="RGB"</strong>><img src="green.jpg" <strong>alt=""</strong>><img src="blue.jpg" <strong>alt=""</strong>></button>
+</abbr></pre>
+ <p>Since each image represents one part of the text, it could also
+ be written like this:</p>
+ <pre><abbr title="red, green and blue.">
+<button name="rgb"><img src="red.jpg" <strong>alt="R"</strong>><img src="green.jpg" <strong>alt="G"</strong>>
+<img src="blue.jpg" <strong>alt="B"</strong>></button></abbr>
+ </pre>
+ <p>However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.</p>
+ </div>
+ <p> </p>
+
</div>
<div class="section" id="sec12">
<h3 id="unknown"><span class="secno">3.12 </span> 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 <em title="must" class="rfc2119">must</em> be provided using the <code>figcaption</code> element and 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>
<h4 id="hbii2">Example 12.1</h4>
<div class="example">
- <p>In example A, a person uploads a photo to a photo sharing site, the alt attribute content identifies the image "photo 1" while the caption provides the image file name. Neither the alt or the caption provide for text alternative for the image, but the image is identified and implicitly associated with the caption via the term "photo1". In example B, the caption has been updated to provide a caption that can also serve as a text alternative.</p>
+ <p>In example A, a person uploads a photo to a photo sharing site, the alt attribute content identifies the image "photo 1" while the caption provides the image file name. Neither the alt or the caption provide for text alternative for the image, but the image is identified and implicitly associated with the caption via the term "photo1". In example B, the caption has been updated to provide a caption that can also serve as a text alternative. Both examples use <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
<p><strong>Examples of an image in context:</strong></p>
<h5 id="example-a">Example A:</h5>
<p class="warning">The caption text in Example A is not a suitable text alternative and is not conforming to the Web Accessibility Guidelines 2.0. <span>[<cite><a href="#bib-WCAG20" rel="biblioentry" class="bibref">WCAG20</a></cite>]</span></p>
@@ -1423,9 +1407,9 @@
<p><strong>Photo 1: clara.jpg, taken on 12/11/2010.</strong></p>
</div>
<p><strong>Example code:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="clara.jpg" <strong>alt="Photo 1."</strong>>
-<figcaption><strong>Photo 1: clara.jpg, taken on 12/11/2010.</strong></figcaption><br></figure>
+<figcaption><strong>clara.jpg, taken on 12/11/2010.</strong></figcaption><br></figure>
</pre>
<h5 id="example-b">Example B: </h5>
<div class="element1">
@@ -1435,9 +1419,9 @@
She looks like a real 'Rock & Roll' girl.</strong><strong></strong></p>
</div>
<p><strong>Example code:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="clara.jpg" <strong>alt="Photo 1."</strong>>
-<figcaption><strong>Photo 1: Clara in her bedroom, playing her 'electric' toy guitar.
+<figcaption><strong> Clara in her bedroom, playing her 'electric' toy guitar.
She looks like a real 'Rock & Roll' girl.</strong></figcaption><br></figure></pre></div>
</div>
Index: developer.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/developer.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- developer.html 25 Nov 2011 16:23:14 -0000 1.4
+++ developer.html 28 Nov 2011 16:59:00 -0000 1.5
@@ -651,7 +651,7 @@
</style><link charset="utf-8" type="text/css" rel="stylesheet" href="style.css"></head>
<body style="display: inherit;"><div class="head"><p><a href="http://www.w3.org/"><img src="http://www.w3.org/Icons/w3c_home" alt="W3C" width="72" height="48"></a></p><h1 class="title" id="title">HTML5: Techniques for providing useful text alternatives</h1>
-<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 25 November 2011</h2><dl><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><dt>Editor:</dt><dd><span>Steve Faulkner</span>, The Paciello Group <span class="ed_mailto"><a href="mailto:sfaulkner@paciellogroup.com">sfaulkner@paciellogroup.com</a></span> </dd>
+<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 28 November 2011</h2><dl><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><dt>Editor:</dt><dd><span>Steve Faulkner</span>, The Paciello Group <span class="ed_mailto"><a href="mailto:sfaulkner@paciellogroup.com">sfaulkner@paciellogroup.com</a></span> </dd>
</dl><p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p><hr></div>
@@ -726,39 +726,29 @@
<li><a href="blue.html"><img src="blue.jpeg" <strong>alt="Blue"</strong>></a></li>
</ul></pre>
</div>
-<h4 id="hac">Example 1.2</h4>
+
+<h4 id="hac3">Example 1.2</h4>
<div class="example">
- <p>In this example, a button has a set of images to indicate the
- kind of color output desired by the user. The first image is used to give the text alternative.</p>
+ <p>In this example, a link contains a logo. The link points to the W3C web site. The text alternative is a brief description of the link target.</p>
<p><strong>Example Rendering:</strong></p>
- <p><img src="images/rgbbutton1.gif" alt="A button with the letters R G B." width="88" height="49"></p>
+ <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" alt="W3C web site" width="72" height="48"></a></abbr></p>
<p><strong>Example code:</strong></p>
- <pre><abbr title="red, green and blue."><button name="rgb">
-<img src="red.jpg" <strong>alt="RGB"</strong>><img src="green.jpg" <strong>alt=""</strong>><img src="blue.jpg" <strong>alt=""</strong>></button>
-</abbr></pre>
- <p>Since each image represents one part of the text, it could also
- be written like this:</p>
- <pre><abbr title="red, green and blue.">
-<button name="rgb"><img src="red.jpg" <strong>alt="R"</strong>><img src="green.jpg" <strong>alt="G"</strong>>
-<img src="blue.jpg" <strong>alt="B"</strong>></button></abbr>
+ <pre>
+<a href="http://w3.org"><br><img src="images/w3c_home.png" width="72" height="48" <strong>alt="W3C web site"</strong>><br></a>
</pre>
- <p>However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.</p>
-</div>
-<h4 id="hac3">Example 1.3</h4>
+
+</div>
+<h4 id="hac31">Example 1.3</h4>
<div class="example">
- <p>In this example, a link contains a logo. The link points to the W3C web site. The text alternative is a brief description of the link target.</p>
+ <p>In this example, a link contains a print preview icon. The link points to the a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.</p>
<p><strong>Example Rendering:</strong></p>
- <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" alt="W3C web site" width="72" height="48"></a></abbr></p>
+ <p><img src="images/preview.png" width="32" height="30" alt="print preview"></p>
<p><strong>Example code:</strong></p>
- <pre><abbr title="World Wide Web Consortium">
-<a href="http://w3.org">
-<img src="images/w3c_home.png" width="72" height="48" <strong>alt="W3C web site"</strong>>
-</a>
-</abbr>
+ <pre>
+<a href="preview.html"><br><img src="images/preview.png" width="32" height="30" <strong>alt="Print preview."</strong>><br></a>
</pre>
+ </div>
-</div>
-
<h4 id="had">Related techniques and resources</h4>
<ul>
<li><a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G196">Using a text alternative on one item within a group of images that describes all items in the group</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
@@ -803,22 +793,21 @@
</div>
<h4 id="haee">Example 2.3</h4>
<div class="example">
- <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> attribute:</p>
+ <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used on the containing <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its description:</p>
<p><strong>Example Code:</strong><br>
</p>
- <pre><p><img src="flowchart.gif" <strong>alt="A flowchart representing a process for dealing with a non-functioning lamp."</strong>
-<strong>aria-describedby="d1"</strong>></p>
-
+ <pre><figure role="group">
+<p><img src="flowchart.gif" <strong>alt="A flowchart representing a process for dealing with a non-functioning lamp."</strong><strong></strong>></p>
<p <strong>id="d1"</strong>>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>
-</pre>
- <h5 id="haf"> </h5>
+<br></figure></pre>
</div>
<h4 id="hag">Example 2.4</h4>
<div class="example">
- <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using the <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> attribute. <strong>Note:</strong> The the longer text alternative is structured using an ordered list.</p>
+ <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the containing <code>figure</code> element. </p>
+ <p><strong>Note:</strong> The the longer text alternative is structured using an ordered list.</p>
<p><strong>Example Image in context:</strong></p>
<div class="element1">
<p><img src="images/flowchart.gif" alt="A flowchart process for dealing with a non-functioning lamp." width="221" height="299"></p>
@@ -833,13 +822,12 @@
</div>
<p><strong>Example Code:</strong><br>
</p>
- <pre><p><img src="flowchart.gif" <strong>alt="A flowchart process for dealing with a non-functioning lamp."</strong>
-<strong>aria-describedby="d1"</strong>></p>
-
+ <pre><figure role="group">
+<img src="flowchart.gif" <strong>alt="A flowchart process for dealing with a non-functioning lamp."</strong>>
-<div <strong>id="d1"</strong>>
<strong>If the lamp doesn't work:</strong><br><strong><ol></strong><br> <strong><li></strong>Check if it's plugged in, if not, plug it in.<strong></li></strong><br> <strong><li></strong>If it still doesn't work; check if the bulb is burned out.<br> If it is, replace the bulb.<strong></li></strong><br> <strong><li></strong>If it still doesn't work; buy a new lamp.<strong></li></strong><br><strong></ol></strong>
-</div> </pre>
+
+</figure></pre>
</div>
<h4 id="hag21">Example 2.5</h4>
<div class="example">
@@ -966,8 +954,7 @@
<p <strong>id="d2"</strong>>Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%.</p></pre>
</div>
-<h4 id="haq">Related techniques and resources</h4>
-<p><a href="http://www.w3.org/TR/WCAG-TECHS/H30.html"></a></p>
+
</div>
<div class="section" id="sec5">
<h3 id="decorative"><span class="secno">3.5 </span>A purely decorative image that doesn't add any information</h3>
@@ -1260,7 +1247,7 @@
<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><a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used to add usable semantics to the figure element which also provides a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</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>
@@ -1275,19 +1262,17 @@
<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 <strong>role="group"</strong>>
<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 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>
+beyond are blocks of flats. In the distance there's a church steeple."</strong>>
+<figcaption>View from the top of Sopwith house, looking towards north Kingston. <br>This image is updated every hour.</figcaption>
+</figure><br>
<p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
-latest weather details</a> for Kingston upon Thames.</p>
-</figure> </pre>
+latest weather details</a> for Kingston upon Thames.</p> </pre>
</div>
<h4 id="hbh">Example 10.2</h4>
-<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 that support <code>aria-describedby</code> this will result in the text content of the referenced elements be joined together as the content of the images accessible description:</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 <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
<p>"View from the top of Sopwith house, looking towards north Kingston. 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>
@@ -1296,77 +1281,57 @@
<p><strong>Image example in context:</strong></p>
<div class="element1">
<p><img src="images/webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds." 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>
- <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,
+ <p>View from the top of Sopwith house, looking towards North Kingston. 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>
+ <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><figure>
-<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>
-<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.
+ <pre><figure <strong>role="group"</strong>>
+<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds."</strong><strong></strong>>
+<figcaption>View from the top of Sopwith house, looking towards north Kingston.<br>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>
+In the distance there's a church steeple.</figcaption>
+<p>This image is updated every hour.</p><br></figure><br><br><p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
+latest weather details</a> for Kingston upon Thames.</p> </pre>
</div>
<h4 id="hbi">Example 10.3</h4>
-<p>The previous webcam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. both examples use include the longer text alternative in a paragraph associated with the image using <code>aria-describedby</code>. </p>
+<p>The previous webcam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. Both examples use <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</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>
<div class="element1">
<p><img src="images/webcam1.jpg" alt="Sopwith house weather cam. Includes date and time information indicating when the image was taken." 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>
- <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>
+ <p>View from the top of Sopwith house, looking towards North Kingston. 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. 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 1:</strong></p>
- <pre><figure>
-<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Includes date and time information indicating when the image was taken."</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>
-<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.
+ <pre><figure role="group">
+<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Includes date and time information indicating when the image was taken."</strong><strong></strong>><br><figcaption>View from the top of Sopwith house, looking towards north Kingston<br>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>
+In the distance there's a church steeple.</figcaption>
+<p>This image is updated every hour.</p><br></figure><br><br><p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
+latest weather details</a> for Kingston upon Thames.</p> </figure> </pre>
<p><strong>Code Example 2:</strong></p>
- <pre><figure>
-<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam."</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>
-<p><strong>Sopwith House Weather cam image description:</strong></p>
-<strong><p id="s2"></strong>In the foreground of the image are the safety rails on the flat part of the roof.
+ <pre><figure role="group">
+<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam."</strong>>
+<figcaption id="s1">View from the top of Sopwith house, looking towards north Kingston.<br>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.<strong>
- Across the top of the image is date and time information indicating when it was taken.</p></strong>
-</figure> </pre>
+In the distance there's a church steeple.<strong><br>Across the top of the image is date and time information indicating when it was taken.</strong><br>This image is updated every hour. <br></figcaption>
+</figure>
+<p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">
+latest weather details</a> for Kingston upon Thames.</p></pre>
</div>
<h4 id="hbj">Related techniques and resources</h4>
<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> [<cite><a href="#bib-WAI-ARIA-PRACTICES" rel="biblioentry" class="bibref">WAI-ARIA-PRACTICES</a></cite>]</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>
</div>
<div class="section" id="sec11">
-<h3 id="imgslices"><span class="secno">3.11 </span>A group of images that form a single larger picture with and without links</h3>
+<h3 id="imgslices"><span class="secno">3.11 </span>A group of images that form a single larger picture</h3>
<p>When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, one of the images <em title="must" class="rfc2119">must</em> have its alt attribute set as per the relevant rules that would be appropriate for the picture as a whole, and then all the remaining images <em title="must" class="rfc2119">must</em> have an empty alt attribute.</p>
<h4 id="hbii">Example 11.1</h4>
<div class="example">
@@ -1391,15 +1356,34 @@
<pre><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>
+</pre></div>
+ <h4 id="hac">Example 11.3</h4>
+ <div class="example">
+ <p>In this example, a button has a set of images to indicate the
+ kind of color output desired by the user. The first image is used to give the text alternative.</p>
+ <p><strong>Example Rendering:</strong></p>
+ <p><img src="images/rgbbutton1.gif" alt="A button with the letters R G B." width="88" height="49"></p>
+ <p><strong>Example code:</strong></p>
+ <pre><abbr title="red, green and blue."><button name="rgb">
+<img src="red.jpg" <strong>alt="RGB"</strong>><img src="green.jpg" <strong>alt=""</strong>><img src="blue.jpg" <strong>alt=""</strong>></button>
+</abbr></pre>
+ <p>Since each image represents one part of the text, it could also
+ be written like this:</p>
+ <pre><abbr title="red, green and blue.">
+<button name="rgb"><img src="red.jpg" <strong>alt="R"</strong>><img src="green.jpg" <strong>alt="G"</strong>>
+<img src="blue.jpg" <strong>alt="B"</strong>></button></abbr>
+ </pre>
+ <p>However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.</p>
+ </div>
+ <p> </p>
+
</div>
<div class="section" id="sec12">
<h3 id="unknown"><span class="secno">3.12 </span> 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 <em title="must" class="rfc2119">must</em> be provided using the <code>figcaption</code> element and 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>
<h4 id="hbii2">Example 12.1</h4>
<div class="example">
- <p>In example A, a person uploads a photo to a photo sharing site, the alt attribute content identifies the image "photo 1" while the caption provides the image file name. Neither the alt or the caption provide for text alternative for the image, but the image is identified and implicitly associated with the caption via the term "photo1". In example B, the caption has been updated to provide a caption that can also serve as a text alternative.</p>
+ <p>In example A, a person uploads a photo to a photo sharing site, the alt attribute content identifies the image "photo 1" while the caption provides the image file name. Neither the alt or the caption provide for text alternative for the image, but the image is identified and implicitly associated with the caption via the term "photo1". In example B, the caption has been updated to provide a caption that can also serve as a text alternative. Both examples use <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
<p><strong>Examples of an image in context:</strong></p>
<h5 id="example-a">Example A:</h5>
<p class="warning">The caption text in Example A is not a suitable text alternative and is not conforming to the Web Accessibility Guidelines 2.0. <span>[<cite><a href="#bib-WCAG20" rel="biblioentry" class="bibref">WCAG20</a></cite>]</span></p>
@@ -1409,9 +1393,9 @@
<p><strong>Photo 1: clara.jpg, taken on 12/11/2010.</strong></p>
</div>
<p><strong>Example code:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="clara.jpg" <strong>alt="Photo 1."</strong>>
-<figcaption><strong>Photo 1: clara.jpg, taken on 12/11/2010.</strong></figcaption><br></figure>
+<figcaption><strong>clara.jpg, taken on 12/11/2010.</strong></figcaption><br></figure>
</pre>
<h5 id="example-b">Example B: </h5>
<div class="element1">
@@ -1421,9 +1405,9 @@
She looks like a real 'Rock & Roll' girl.</strong><strong></strong></p>
</div>
<p><strong>Example code:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="clara.jpg" <strong>alt="Photo 1."</strong>>
-<figcaption><strong>Photo 1: Clara in her bedroom, playing her 'electric' toy guitar.
+<figcaption><strong> Clara in her bedroom, playing her 'electric' toy guitar.
She looks like a real 'Rock & Roll' girl.</strong></figcaption><br></figure></pre></div>
</div>
@@ -1479,7 +1463,7 @@
</div>
<h4 id="143">Example 14.3</h4>
-<p>If the logo is being used next to the name of the what that it represents, then the logo is supplemental, and its <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em> instead be empty.</p>
+<p>If the logo is being used next to the name of the what that it represents, then the logo is supplemental, and its <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em> instead be empty.</p>
<div class="example">
<p><strong>Example:</strong></p>
<div class="element">
@@ -1688,7 +1672,7 @@
<p>Note: This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text. </p>
<h3 id="hbt">Empty alt attribute or null alt attribute.</h3>
<p>An alt attribute with no content:</p>
-<div class="example"><pre><img src="null.gif" <strong>alt=""</strong>></pre></div>
+<pre class="example"><img src="null.gif" <strong>alt=""</strong>></pre>
<h3 id="hbu">Text alternative</h3>
<p><a title="definition: text" href="http://www.w3.org/TR/WCAG20/#textdef">Text</a> that is programmatically associated with <a title="definition: non-text content" href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a> or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-programmatically-determined-head">programmatically determined</a> from the non-text content.</p>
</div>
Received on Monday, 28 November 2011 16:59:07 UTC