- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 29 Nov 2011 14:40:01 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv3429
Modified Files:
Overview.html developer.html
Log Message:
fixed examples, added notes to indicate willful viloations of HTML5 and the living standard. Added some links
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.82
retrieving revision 1.83
diff -u -d -r1.82 -r1.83
--- Overview.html 28 Nov 2011 17:02:31 -0000 1.82
+++ Overview.html 29 Nov 2011 14:39:59 -0000 1.83
@@ -95,7 +95,7 @@
.note p:first-child, .warning p:first-child { margin-top: 0; }
.warning:before { font-style: normal; }
- p.note:before { content: 'Note: '; }
+
p.warning:before { content: '\26A0 Warning! '; }
@@ -539,23 +539,9 @@
padding: 3px 1em;
}
-.note {
- margin: 0.5em 0em 0em;
- padding: 0.5em;
- border: 1px dashed #FF0000;
- background: #f5f5f5;
-}
-.note::before {
- content: "Note";
- display: block;
- width: 150px;
- margin: -1.5em 0 0.5em 0;
- font-weight: bold;
- border: 1px solid #cff6d9;
- background: #fff;
- padding: 3px 1em;
-}
+
+
/* --- Best Practices --- */
div.practice {
@@ -659,9 +645,22 @@
figure {margin:0px;}
figcaption{padding-bottom: 1em;}
-</style><link charset="utf-8" type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED"></head>
+</style><link charset="utf-8" type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
+<style type="text/css">
+
+.note { font-weight: bolder;
+ font-style: italic;
+ color: #900;
+ font-size: medium;
+ margin: 0.5em 0em 0em;
+ padding: 0.5em;
+ border: 1px dashed #FF0000;
+ background: #f5f5f5;
+}
+</style>
+</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 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>
+<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 29 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>
@@ -685,7 +684,10 @@
<li class="tocline">4.2.1 <a href="#nested">Using nested figure elements</a></li>
</ul>
</li>
- <li class="tocline"><a class="tocxref" href="#secm7"><span class="secno">4.3 </span>The <code>img</code> element <code>title</code> attribute</a></li></ul></li><li class="tocline"><a class="tocxref" href="#gloss"><span class="secno">5. </span>Glossary</a></li><li class="tocline"><a class="tocxref" href="#ack"><span class="secno">6. </span>Acknowledgements</a></li><li class="tocline"><a class="tocxref" href="#references"><span class="secno">A. </span>References</a><ul class="toc"><li class="tocline"><a class="tocxref" href="#normative-references"><span class="secno">A.1 </span>Normative references</a></li><li class="tocline"><a class="tocxref" href="#informative-references"><span class="secno">A.2 </span>Informative references</a></li></ul></li></ul></div>
+ <li class="tocline"><a class="tocxref" href="#secm7"><span class="secno">4.3 </span>The <code>img</code> element <code>title</code> attribute</a></li>
+ <li class="tocline">4.4 <a href="#aria-roles">Use of ARIA roles</a></li>
+</ul>
+</li><li class="tocline"><a class="tocxref" href="#gloss"><span class="secno">5. </span>Glossary</a></li><li class="tocline"><a class="tocxref" href="#ack"><span class="secno">6. </span>Acknowledgements</a></li><li class="tocline"><a class="tocxref" href="#references"><span class="secno">A. </span>References</a><ul class="toc"><li class="tocline"><a class="tocxref" href="#normative-references"><span class="secno">A.1 </span>Normative references</a></li><li class="tocline"><a class="tocxref" href="#informative-references"><span class="secno">A.2 </span>Informative references</a></li></ul></li></ul></div>
<hr>
@@ -717,6 +719,10 @@
</ul>
<div class="section" id="conformance"><h3><span class="secno">2.1 </span>Conformance</h3><p>As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.</p>
<p>The key words <em title="must" class="rfc2119">must</em>, <em title="must not" class="rfc2119">must not</em>, <em title="required" class="rfc2119">required</em>, <em title="should" class="rfc2119">should</em>, <em title="should not" class="rfc2119">should not</em>, <em title="recommended" class="rfc2119">recommended</em>, <em title="may" class="rfc2119">may</em>, and <em title="optional" class="rfc2119">optional</em> in this specification are to be interpreted as described in [<cite><a href="#bib-RFC2119" rel="biblioentry" class="bibref">RFC2119</a></cite>].</p>
+<H4 id="compliance-with-other-specifications">2.1.1 Compliance with other specifications</H4>
+<p><em>This section is non-normative.</em>
+<p>This specification interacts with and relies on a variety of other specifications. In certain circumstances, unfortunately, conflicting needs have led to this specification violating the requirements of these other specifications. Whenever this has occurred, the transgressions have each been noted as a "willful violation", and the reason for the violation has been noted.</p>
+<p> </p>
</div>
</div>
<hr>
@@ -775,8 +781,8 @@
<h3 id="graphical-representations"><span class="secno">3.2 </span>Graphical representations: charts, diagrams, graphs, maps, illustrations</h3>
<p>The full text alternative <em title="may" class="rfc2119">may</em> be provided in the <code>alt</code> attribute, or a shorter text alternative <em title="may" class="rfc2119">may</em> be provided in the <code>alt</code> attribute or in a programmatically associated element, and a longer programmatically associated text alternative provided in the same document or in a linked document. </p>
<p>It is important to understand that a text alternative provided in the alt attribute is a <em>replacement</em> for the image, while a short text alternative in the alt attribute, accompanied by a programmatically associated longer text alternative, can be a description of the
- image or a link target if the image is the sole content of a link.</p>
-<p>While all the examples below can be considered for use, each method has advantages and disadvantages.</p>
+ image or a link target if the image is the sole content of a link. </p>
+<p class="note">While all the examples below can be considered for use, each method has advantages and disadvantages (refer to section <a href="#altmethod">4. Methods for Providing Text Alternatives</a>) .</p>
<h4 id="hae">Example 2.1</h4>
<div class="example">
<p>In the following example we have an image of a <a href="#flowchart">flowchart</a> , with text in the <code>alt</code> attribute describes the process shown in the flowchart:</p>
@@ -795,6 +801,9 @@
<p><strong>Example Code:</strong><br>
</p>
<pre><p><strong><a href="#d1" title="Flowchart description."></strong><img src="flowchart.gif" <strong>alt="Broken lamp flowchart description."</strong>><strong></a></strong></p>
+
+...
+
...
<div <strong>id="d1"</strong>>
@@ -810,10 +819,10 @@
<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><figure role="group">
+ <pre><figure <strong>role="group"</strong>>
<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,
+<p<strong></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>
<br></figure></pre>
@@ -896,6 +905,7 @@
</div>
<h4 id="hah">Related techniques and resources</h4>
<ul>
+ <li><a href="http://ncam.wgbh.org/experience_learn/educational_media/stemdx">Effective Practices for Description of Science Content within Digital Talking Books</a></li>
<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> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</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> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
<li><a href="http://www.webaim.org/techniques/images/longdesc.php">Creating Accessible Images: Long Descriptions</a> (WebAIM tutorial)</li>
@@ -961,13 +971,18 @@
</div>
<h4 id="hao">Example 4.2</h4>
<div class="example">
- <p>Here's another example of the same <a href="#piechart">pie chart</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/#aria-describedby">aria-describedby</a> attribute:</p>
+ <p>Here's another example of the same <a href="#piechart">pie chart</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 to add usable semantics to the figure element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its text alternative:</p>
<p><strong>Example code:</strong></p>
- <pre><p><img src="figure1.gif" <strong>alt="Figure 1"</strong> <strong>aria-describedby="d2"</strong>></p>
+ <pre><figure <strong>role="group"</strong>>
+<img src="figure1.gif" <strong>alt="Figure 1"</strong><strong></strong>>
-<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>
+<figcaption>Figure 1. Distribution of Articles by Journal Category.
+Pie chart: Language=68%, Education=14% and Science=18%.</figcaption>
+</figure></pre>
+
+</div>
+<h5>Note: </h5>
+<p class="note">In example 4.2 above, the <code>alt</code> attribute is be used a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>], but is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<div class="section" id="sec5">
@@ -1013,12 +1028,11 @@
<p><strong>Example Image </strong></p>
<p><img src="images/shalott.jpg" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott" width="338" height="234"> </p>
<p><strong>Example code: </strong></p>
- <pre><hgroup><h1>The Lady of Shalott</h1>
-<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
-<figure>
+ <pre><header><h1>The Lady of Shalott</h1>
+<h2>A poem by Alfred Lord Tennyson</h2></header>
+
<img src="shalott.jpeg" <strong>alt="Painting of a young woman with long hair, sitting in a wooden boat. "</strong>>
<p><a href="#des">Description of the painting</a>.</p>
-</figure>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. -->
@@ -1033,21 +1047,20 @@
<h4 id="hau">Example 6.2</h4>
<div class="example">
<p>It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image. </p>
- <p>In this example of the same image, there is a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. Note a <code>title</code> has been included on the link for sighted mouse users, the <code>title</code> provides information about the link target.</p>
+ <p>In this example of the same image, there is a short text alternative included in the alt attribute, there is a link after the image. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. </p>
<p><strong>Example image in context: </strong></p>
<div class="element1">
<p><strong>The Lady of Shalott</strong><br>
<small>A poem by Alfred Lord Tennyson.</small></p>
- <p class="figure"><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" alt="Information about this painting inspired by the poem." title="Information about this painting inspired by the poem." width="271" height="171"></a></p>
+ <p class="figure"><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="271" height="171"></p>
+ <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>
<p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
</div>
<p><strong>Example code: </strong></p>
- <pre><hgroup><h1>The Lady of Shalott</h1>
-<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
-<figure><a href="http://bit.ly/5HJvVZ" title="Information about this painting inspired by the poem.">
-<img src="shalott.jpeg" <strong>alt="Information about this painting inspired by the poem."</strong>></a></figure>
-
-<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
+ <pre><header><h1>The Lady of Shalott</h1>
+<p>A poem by Alfred Lord Tennyson</p></header>
+<br><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>>
+<p><a href="http://bit.ly/5HJvVZ"><strong>About this painting.</strong></a></p><br><br><!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
@@ -1069,7 +1082,7 @@
</pre>
</div> -->
<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>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 is that both the image an the text is included 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 the <code>p</code> element. The example below makes use of this change.</p>
<div class="example">
<p><strong>Example image in context: </strong></p>
@@ -1077,49 +1090,52 @@
<p><strong>The Lady of Shalott</strong><br>
<small>A poem by Alfred Lord Tennyson.</small></p>
<div class="figure">
- <p><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="302" height="212"></a></p>
- <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p> </div>
+ <p><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="302" height="212"></p> <p>About this painting.</p></a>
+ </div>
<p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
</div>
<p><strong>Example code: </strong></p>
- <pre><hgroup><h1>The Lady of Shalott</h1>
-<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
-<figure><a href="http://bit.ly/5HJvVZ">
+ <pre><header><h1>The Lady of Shalott</h1>
+<p>A poem by Alfred Lord Tennyson</p></header>
+<figure><br><a href="http://bit.ly/5HJvVZ">
<img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>>
-<p><strong>About this painting.</strong></p></a></figure>
+<p><strong>About this painting.</strong></p></a><br></figure>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
<h4 id="haw">Example 6.4</h4>
<div class="example">
- <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming HTML5, but it is recommended that a brief text alternative is provided. </p>
- <p><strong>Example 1 Image in context: </strong></p>
+ <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming, but it is recommended that a brief text alternative is provided. </p>
+ <p><strong>Example A Image in context: </strong></p>
<div class="element1">
<p><b>Medieval Nights</b></p>
<p><img src="images/shalott.jpg" alt="empty alt" width="188" height="129"></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon Thames.</p>
</div>
- <p><strong>Example code 1: </strong></p>
+ <p><strong>Example code A: </strong></p>
<pre><h1>Medieval Nights</h1>
<p><img src="shalott.jpeg" <strong>alt=""</strong>></p>
<p>Join us for our medieval theme nights every Friday at
Boaters Bar,on the riverside, Kingston upon Thames.</p>
</pre>
- <p><strong>Example 2 Image in context: </strong></p>
+ <p><strong>Example B Image in context: </strong></p>
<div class="element1">
<p><b>Medieval Night</b></p>
<p><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="188" height="129"></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon Thames.</p>
</div>
- <p><strong>Example code 2: </strong></p>
+ <p><strong>Example code B: </strong></p>
<pre><h1>Medieval Nights</h1>
-<figure><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></figure>
+<p><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar,
- on the riverside, Kingston upon Thames.</p></pre>
+ on the riverside, Kingston upon Thames.</p>
+</pre>
</div>
+<h5>Note: </h5>
+<p class="note">A number of examples in section 6.1 above include text alternatives for images that in context may be considered 'purely decorative'. Its status as 'purely decorative' cannot be authoritatively discerned and some users who access text alternatives have voiced a desire to have text alternatives provided (Refer to <a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a> and <a href="http://www.headstar.com/eablive/?p=106">Now You See It, Now You Don't</a>). Use in this context conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>] and <a href="#bib-HTML5">HTML5</a> [HTML5]. Its designation as conforming is a willful violation of <a href="#bib-HTMLLS">HTML Living Standard</a> [HTMLLS]</p>
<h4 id="hax">Related techniques and resources</h4>
<ul>
<li><a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a></li>
@@ -1221,13 +1237,13 @@
<p>Lola prefers a bath to a shower.</p>
</div>
<p><strong>Example code 1:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="1100670787_6a7c664aef.jpg" <strong>alt="Lola the cat sitting under an umbrella in the bath tub."</strong>>
<figcaption>Lola prefers a bath to a shower.</figcaption>
</figure>
</pre>
<p><strong>Example code 2:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="1100670787_6a7c664aef.jpg" <strong>alt="Photo of Lola the cat sitting under an umbrella in the bath tub."</strong>>
<figcaption>Lola prefers a bath to a shower.</figcaption>
</figure> </pre>
@@ -1242,7 +1258,7 @@
<p>The first of the ten cards in the Rorschach test.</p>
</div>
<p><strong>Code Example:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="Rorschach1.jpg" <strong>alt="An abstract, free form inkblot."</strong>>
<figcaption>The first of the ten cards in the Rorschach test.</figcaption>
</figure> </pre>
@@ -1397,33 +1413,36 @@
<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. 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>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 an edequate 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>
<div class="element1">
<p><strong>My Photos > Photos of Clara</strong></p>
<p><img src="images/clara.jpg" alt="photo 1" width="400" height="344"></p>
- <p><strong>Photo 1: clara.jpg, taken on 12/11/2010.</strong></p>
+ <p><strong> clara.jpg, taken on 12/11/2010 (Photo 1).</strong></p>
</div>
<p><strong>Example code:</strong></p>
<pre><figure role="group">
<img src="clara.jpg" <strong>alt="Photo 1."</strong>>
-<figcaption><strong>clara.jpg, taken on 12/11/2010.</strong></figcaption><br></figure>
+<figcaption><strong>clara.jpg, taken on 12/11/2010 (photo 1).</strong></figcaption><br></figure>
</pre>
<h5 id="example-b">Example B: </h5>
<div class="element1">
<p><strong>My Photos > Photos of Clara</strong></p>
<p><img src="images/clara.jpg" alt="photo 1" width="400" height="344"></p>
- <p><strong>Photo 1: Clara in her bedroom, playing her 'electric' toy guitar.
-She looks like a real 'Rock & Roll' girl.</strong><strong></strong></p>
+ <p><strong> Clara in her bedroom, playing her 'electric' toy guitar.
+She looks like a real 'Rock & Roll' girl (photo1).</strong><strong></strong></p>
</div>
<p><strong>Example code:</strong></p>
<pre><figure role="group">
<img src="clara.jpg" <strong>alt="Photo 1."</strong>>
<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>
-
+She looks like a real 'Rock & Roll' girl (Photo 1).</strong></figcaption><br></figure></pre>
+
+</div>
+<h5>Note:</h5>
+<p class="note"> In examples A & B above, the <code>alt </code>attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the <code>alt</code> attribute in this context is allowed as a bridging technique until the <code>figure</code> and <code>figcaption</code> element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<div class="section" id="sec13">
<h3 id="captcha"><span class="secno">3.13 </span>CAPTCHA Images </h3>
@@ -1534,7 +1553,7 @@
<h3 id="altmethod"><span class="secno">4.1 </span>The <code>img</code> element <code>alt</code> attribute</h3>
<p>The primary method for providing text alternatives for images is by including text in the <code>img</code> element <code>alt</code> attribute. In graphical browsers the content of the alt attribute is typically displayed along with an indication (bordered area and/or an image icon) of the presence of an image when the image is not displayed, because the user has disabled image display or the image source information is incorrect. Assistive technologies such as screen readers will typically announce the presence of an image followed by the alt attribute content. Text based browsers may display the alt attribute content in brackets or in different colored text or as the content of a link to the image or as text without any indication of the image or prefixed with an indication of the image.</p>
<p><strong>Example:</strong></p>
-<pre><img src="example.jpg" <strong>alt="Alternative text."</strong>></pre>
+<pre><img src="example.jpg" <strong>alt="text alternative."</strong>></pre>
<h5 id="hd">Advantages:</h5>
<ul>
<li>Robust support in most graphical & non graphical web browsers and assistive technologies.</li>
@@ -1607,12 +1626,12 @@
</div> <p><strong>Code example:</strong></p>
-<pre><figure> <br><img src="shadows.jpg"> <br><figcaption><strong> Shadow like figures and a graffiti tag drawn on the walls of a
- partially demolished building, illuminated by the light from a street lamp. </strong></figcaption> <br></figure></pre>
+<pre><figure role="group"> <br><img src="shadows.jpg"> <br><figcaption><strong> Shadow like figures and a graffiti tag drawn on the walls of a
+ partially demolished building, illuminated by the light from a street lamp (photo). </strong></figcaption> <br></figure></pre>
</div>
<h5 id="hg">Advantages:</h5>
<ul>
- <li>When supported by browsers and assistive technology the content of the <code>figcaption</code> will be explicitly associated with the image.</li>
+ <li>When supported by browsers and assistive technology the content of the <code>figcaption</code> will be explicitly associated with the image. </li>
</ul>
<h5 id="hi">Disadvantages:</h5>
<ul>
@@ -1640,18 +1659,18 @@
</figure>
</div>
<p><strong>Code example: </strong></p>
- <pre><figure>
+ <pre><figure role="group">
<figcaption>The castle through the ages: 1423, 1756, and 1966 respectively.</figcaption>
</pre>
- <pre><figure>
+ <pre><figure role="group">
<img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">
<figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption>
</figure>
-<figure>
+<figure role="group">
<img src="castle-painting.jpg" alt="The castle now has two towers and two walls.">
<figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
</figure>
-<figure>
+<figure role="group">
<img src="castle-fluro.jpg" <br>alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
</figure><br>
@@ -1662,8 +1681,20 @@
<div class="section" id="secm7">
<h3 id="hv"><span class="secno">4.3 </span>The <code>img</code> element <code>title</code> attribute</h3>
<p>The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a text alternative for an image. The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a caption for an image, use the <code>figure</code> and <code>figcaption</code> elements to provide a caption, as described above.</p>
+<h5>Note:</h5>
+<p class="note">The use of title attribute to markup content that is intended to be available to all users is forbidden, because its use in this context results in content being hidden from keyboard only and touch device users and less usable/unusable for users with cognitive, fine motor skill or vision impairments. This is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5]</p>
</div>
</div>
+<h5>Further Information
+</h5>
+<p><a href="http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/">Using the HTML title attribute</a></p>
+<h3>WAI-ARIA methods</h3>
+<h3 id="aria-roles">4.4 Use of ARIA roles</h3>
+<h4 id="role-group">4.41 role=group</h4>
+<p class="note">to do</p>
+<h4 id="role-img">4.41 role=img</h4>
+<p class="note">to do</p>
+<p> </p>
<hr>
<div class="section" id="gloss">
<!--OddPage--><h2 id="glossary"><span class="secno">5. </span>Glossary</h2>
@@ -1686,7 +1717,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>
-<pre class="example"><img src="null.gif" <strong>alt=""</strong>></pre>
+<div class="example"><pre><img src="null.gif" <strong>alt=""</strong>></pre></div>
<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>
@@ -1710,29 +1741,13 @@
</div>
<div class="appendix section" id="references"><!--OddPage--><h2><span class="secno">A. </span>References</h2><div class="section" id="normative-references"><h3><span class="secno">A.1 </span>Normative references</h3><dl class="bibliography"><dt id="bib-HTML5">[HTML5]</dt><dd>Ian Hickson. <a href="http://dev.w3.org/html5/spec/spec.html"><cite>HTML 5.</cite></a> 4 November 2011. W3C Working Draft. (Work in progress.) URL: <a href="http://dev.w3.org/html5/spec/spec.html">http://dev.w3.org/html5/spec/spec.html</a>
</dd><dt id="bib-RFC2119">[RFC2119]</dt><dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key words for use in RFCs to Indicate Requirement Levels.</cite></a> March 1997. Internet RFC 2119. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
-</dd></dl></div><div class="section" id="informative-references"><h3><span class="secno">A.2 </span>Informative references</h3><dl class="bibliography"><dt id="bib-WAI-ARIA-PRACTICES">[WAI-ARIA-PRACTICES]</dt><dd>Michael Cooper; Richard Schwerdtfeger; Lisa Pappas. <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224"><cite>WAI-ARIA Best Practices.</cite></a> 24 February 2009. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224">http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224</a>
+</dd></dl></div><div class="section" id="informative-references"><h3><span class="secno">A.2 </span>Informative references</h3><dl class="bibliography">
+ <dt id="bib-HTMLLS">[HTMLLS]</dt>
+ <dd> Ian Hickson <a href="http://www.whatwg.org/html">HTML Living Standard</a>, 23 November 2011, URL: <a href="http://www.whatwg.org/html">http://www.whatwg.org/html</a> </dd>
+ <dt id="bib-WAI-ARIA-PRACTICES">[WAI-ARIA-PRACTICES]</dt><dd>Michael Cooper; Richard Schwerdtfeger; Lisa Pappas. <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224"><cite>WAI-ARIA Best Practices.</cite></a> 24 February 2009. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224">http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224</a>
</dd><dt id="bib-WCAG20">[WCAG20]</dt><dd>Michael Cooper; et al. <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211"><cite>Web Content Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211">http://www.w3.org/TR/2008/REC-WCAG20-20081211</a>
</dd><dt id="bib-WCAG20-TECHS">[WCAG20-TECHS]</dt><dd>Michael Cooper; et al. <a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211"><cite>Techniques for WCAG 2.0.</cite></a> 11 December 2008. W3C Note. URL: <a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211">http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211</a>
</dd></dl></div></div>
-<!-- Begin Web-Stat hit counter code -->
- <script type="text/javascript">
-<!--
-var page_name = 'html5:text altermatives (plain)';
-var invisible = '';
-var framed = 'no';
-function sE(){return true;}window.onError=sE;var base=document;
-if(framed=='yes'){base=top.document;}var rn=Math.random();
-var ui='mpaciello';var al='';
-var qry=ui+':2::'+escape(base.referrer)+'::'+screen.width
-+'x'+screen.height+'::'+screen.colorDepth+'::'+escape(page_name)
-+'::'+invisible+'::'+rn+'::'+escape(base.URL);
-document.write('<a href="http://www.web-stat.com/stats/');
-document.write(ui+'.htm"><img tabindex="0" src="http://server3.web-stat.com/count.pl?');
-document.write(qry+'" alt="'+al+'"/><\/a>');
-//-->
- </script>
- <noscript>
- <p> <a href="http://www.web-stat.com"> <img src="http://server3.web-stat.com/count.pl?mpaciello:2::NoJavaScript" alt=""> </a> </p>
- </noscript>
+
</body></html>
\ No newline at end of file
Index: developer.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/developer.html,v
retrieving revision 1.6
retrieving revision 1.7
diff -u -d -r1.6 -r1.7
--- developer.html 28 Nov 2011 17:01:41 -0000 1.6
+++ developer.html 29 Nov 2011 14:39:59 -0000 1.7
@@ -649,13 +649,28 @@
figure {margin:0px;}
figcaption{padding-bottom: 1em;}
-</style><link charset="utf-8" type="text/css" rel="stylesheet" href="style.css"></head>
+</style><link charset="utf-8" type="text/css" rel="stylesheet" href="style.css">
+<style type="text/css">
+
+.note { font-weight: bolder;
+ font-style: italic;
+ color: #900;
+ font-size: medium;
+ margin: 0.5em 0em 0em;
+ padding: 0.5em;
+ border: 1px dashed #FF0000;
+ background: #f5f5f5;
+}
+</style>
+</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 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>
+<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 29 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>
+
+
<div id="abstract" class="introductory section"><!--OddPage--><h2><span class="secno">1. </span>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>
@@ -671,14 +686,17 @@
<li class="tocline">4.2.1 <a href="#nested">Using nested figure elements</a></li>
</ul>
</li>
- <li class="tocline"><a class="tocxref" href="#secm7"><span class="secno">4.3 </span>The <code>img</code> element <code>title</code> attribute</a></li></ul></li><li class="tocline"><a class="tocxref" href="#gloss"><span class="secno">5. </span>Glossary</a></li><li class="tocline"><a class="tocxref" href="#ack"><span class="secno">6. </span>Acknowledgements</a></li><li class="tocline"><a class="tocxref" href="#references"><span class="secno">A. </span>References</a><ul class="toc"><li class="tocline"><a class="tocxref" href="#normative-references"><span class="secno">A.1 </span>Normative references</a></li><li class="tocline"><a class="tocxref" href="#informative-references"><span class="secno">A.2 </span>Informative references</a></li></ul></li></ul></div>
+ <li class="tocline"><a class="tocxref" href="#secm7"><span class="secno">4.3 </span>The <code>img</code> element <code>title</code> attribute</a></li>
+ <li class="tocline">4.4 <a href="#aria-roles">Use of ARIA roles</a></li>
+</ul>
+</li><li class="tocline"><a class="tocxref" href="#gloss"><span class="secno">5. </span>Glossary</a></li><li class="tocline"><a class="tocxref" href="#ack"><span class="secno">6. </span>Acknowledgements</a></li><li class="tocline"><a class="tocxref" href="#references"><span class="secno">A. </span>References</a><ul class="toc"><li class="tocline"><a class="tocxref" href="#normative-references"><span class="secno">A.1 </span>Normative references</a></li><li class="tocline"><a class="tocxref" href="#informative-references"><span class="secno">A.2 </span>Informative references</a></li></ul></li></ul></div>
<hr>
<div class="section" id="intro_alt">
<!--OddPage--><h2 id="intro"><span class="secno">2. </span>Introduction</h2>
<h3 id="text-alt">Text Alternatives</h3>
-<p><a href="http://www.w3.org/TR/WCAG20/#text-altdef">Text alternatives</a> are a primary way of making visual information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.</p>
+<p><a href="http://www.w3.org/TR/WCAG20/#text-altdef">Text alternatives</a> are a primary way of making visual information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.</p>
<p>To determine appropriate <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</a> it is important to think about why an image is being included in a document. What is its purpose? Thinking like this will help you to understand what is important about the image for the page's intended audience. Every image has a reason for being on a page, because it provides useful information, performs a function, or enhances aesthetics. Therefore, knowing what the image is for, makes writing appropriate <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</a> easier.</p>
<h3 id="example-benefits">Examples of scenarios where users benefit from text alternatives for images</h3>
<ul>
@@ -703,6 +721,10 @@
</ul>
<div class="section" id="conformance"><h3><span class="secno">2.1 </span>Conformance</h3><p>As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.</p>
<p>The key words <em title="must" class="rfc2119">must</em>, <em title="must not" class="rfc2119">must not</em>, <em title="required" class="rfc2119">required</em>, <em title="should" class="rfc2119">should</em>, <em title="should not" class="rfc2119">should not</em>, <em title="recommended" class="rfc2119">recommended</em>, <em title="may" class="rfc2119">may</em>, and <em title="optional" class="rfc2119">optional</em> in this specification are to be interpreted as described in [<cite><a href="#bib-RFC2119" rel="biblioentry" class="bibref">RFC2119</a></cite>].</p>
+<H4 id="compliance-with-other-specifications">2.1.1 Compliance with other specifications</H4>
+<p><em>This section is non-normative.</em>
+<p>This specification interacts with and relies on a variety of other specifications. In certain circumstances, unfortunately, conflicting needs have led to this specification violating the requirements of these other specifications. Whenever this has occurred, the transgressions have each been noted as a "willful violation", and the reason for the violation has been noted.</p>
+<p> </p>
</div>
</div>
<hr>
@@ -761,8 +783,8 @@
<h3 id="graphical-representations"><span class="secno">3.2 </span>Graphical representations: charts, diagrams, graphs, maps, illustrations</h3>
<p>The full text alternative <em title="may" class="rfc2119">may</em> be provided in the <code>alt</code> attribute, or a shorter text alternative <em title="may" class="rfc2119">may</em> be provided in the <code>alt</code> attribute or in a programmatically associated element, and a longer programmatically associated text alternative provided in the same document or in a linked document. </p>
<p>It is important to understand that a text alternative provided in the alt attribute is a <em>replacement</em> for the image, while a short text alternative in the alt attribute, accompanied by a programmatically associated longer text alternative, can be a description of the
- image or a link target if the image is the sole content of a link.</p>
-<p>While all the examples below can be considered for use, each method has advantages and disadvantages.</p>
+ image or a link target if the image is the sole content of a link. </p>
+<p class="note">While all the examples below can be considered for use, each method has advantages and disadvantages (refer to section <a href="#altmethod">4. Methods for Providing Text Alternatives</a>) .</p>
<h4 id="hae">Example 2.1</h4>
<div class="example">
<p>In the following example we have an image of a <a href="#flowchart">flowchart</a> , with text in the <code>alt</code> attribute describes the process shown in the flowchart:</p>
@@ -781,6 +803,9 @@
<p><strong>Example Code:</strong><br>
</p>
<pre><p><strong><a href="#d1" title="Flowchart description."></strong><img src="flowchart.gif" <strong>alt="Broken lamp flowchart description."</strong>><strong></a></strong></p>
+
+...
+
...
<div <strong>id="d1"</strong>>
@@ -796,10 +821,10 @@
<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><figure role="group">
+ <pre><figure <strong>role="group"</strong>>
<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,
+<p<strong></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>
<br></figure></pre>
@@ -882,6 +907,7 @@
</div>
<h4 id="hah">Related techniques and resources</h4>
<ul>
+ <li><a href="http://ncam.wgbh.org/experience_learn/educational_media/stemdx">Effective Practices for Description of Science Content within Digital Talking Books</a></li>
<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> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</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> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
<li><a href="http://www.webaim.org/techniques/images/longdesc.php">Creating Accessible Images: Long Descriptions</a> (WebAIM tutorial)</li>
@@ -947,13 +973,18 @@
</div>
<h4 id="hao">Example 4.2</h4>
<div class="example">
- <p>Here's another example of the same <a href="#piechart">pie chart</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/#aria-describedby">aria-describedby</a> attribute:</p>
+ <p>Here's another example of the same <a href="#piechart">pie chart</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 to add usable semantics to the figure element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its text alternative:</p>
<p><strong>Example code:</strong></p>
- <pre><p><img src="figure1.gif" <strong>alt="Figure 1"</strong> <strong>aria-describedby="d2"</strong>></p>
+ <pre><figure <strong>role="group"</strong>>
+<img src="figure1.gif" <strong>alt="Figure 1"</strong><strong></strong>>
-<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>
+<figcaption>Figure 1. Distribution of Articles by Journal Category.
+Pie chart: Language=68%, Education=14% and Science=18%.</figcaption>
+</figure></pre>
+
+</div>
+<h5>Note: </h5>
+<p class="note">In example 4.2 above, the <code>alt</code> attribute is be used a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>], but is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<div class="section" id="sec5">
@@ -999,12 +1030,11 @@
<p><strong>Example Image </strong></p>
<p><img src="images/shalott.jpg" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott" width="338" height="234"> </p>
<p><strong>Example code: </strong></p>
- <pre><hgroup><h1>The Lady of Shalott</h1>
-<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
-<figure>
+ <pre><header><h1>The Lady of Shalott</h1>
+<h2>A poem by Alfred Lord Tennyson</h2></header>
+
<img src="shalott.jpeg" <strong>alt="Painting of a young woman with long hair, sitting in a wooden boat. "</strong>>
<p><a href="#des">Description of the painting</a>.</p>
-</figure>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. -->
@@ -1019,21 +1049,20 @@
<h4 id="hau">Example 6.2</h4>
<div class="example">
<p>It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image. </p>
- <p>In this example of the same image, there is a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. Note a <code>title</code> has been included on the link for sighted mouse users, the <code>title</code> provides information about the link target.</p>
+ <p>In this example of the same image, there is a short text alternative included in the alt attribute, there is a link after the image. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. </p>
<p><strong>Example image in context: </strong></p>
<div class="element1">
<p><strong>The Lady of Shalott</strong><br>
<small>A poem by Alfred Lord Tennyson.</small></p>
- <p class="figure"><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" alt="Information about this painting inspired by the poem." title="Information about this painting inspired by the poem." width="271" height="171"></a></p>
+ <p class="figure"><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="271" height="171"></p>
+ <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p>
<p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
</div>
<p><strong>Example code: </strong></p>
- <pre><hgroup><h1>The Lady of Shalott</h1>
-<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
-<figure><a href="http://bit.ly/5HJvVZ" title="Information about this painting inspired by the poem.">
-<img src="shalott.jpeg" <strong>alt="Information about this painting inspired by the poem."</strong>></a></figure>
-
-<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
+ <pre><header><h1>The Lady of Shalott</h1>
+<p>A poem by Alfred Lord Tennyson</p></header>
+<br><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>>
+<p><a href="http://bit.ly/5HJvVZ"><strong>About this painting.</strong></a></p><br><br><!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
@@ -1055,7 +1084,7 @@
</pre>
</div> -->
<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>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 is that both the image an the text is included 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 the <code>p</code> element. The example below makes use of this change.</p>
<div class="example">
<p><strong>Example image in context: </strong></p>
@@ -1063,49 +1092,52 @@
<p><strong>The Lady of Shalott</strong><br>
<small>A poem by Alfred Lord Tennyson.</small></p>
<div class="figure">
- <p><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="302" height="212"></a></p>
- <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></p> </div>
+ <p><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="302" height="212"></p> <p>About this painting.</p></a>
+ </div>
<p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
</div>
<p><strong>Example code: </strong></p>
- <pre><hgroup><h1>The Lady of Shalott</h1>
-<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
-<figure><a href="http://bit.ly/5HJvVZ">
+ <pre><header><h1>The Lady of Shalott</h1>
+<p>A poem by Alfred Lord Tennyson</p></header>
+<figure><br><a href="http://bit.ly/5HJvVZ">
<img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>>
-<p><strong>About this painting.</strong></p></a></figure>
+<p><strong>About this painting.</strong></p></a><br></figure>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
<h4 id="haw">Example 6.4</h4>
<div class="example">
- <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming HTML5, but it is recommended that a brief text alternative is provided. </p>
- <p><strong>Example 1 Image in context: </strong></p>
+ <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming, but it is recommended that a brief text alternative is provided. </p>
+ <p><strong>Example A Image in context: </strong></p>
<div class="element1">
<p><b>Medieval Nights</b></p>
<p><img src="images/shalott.jpg" alt="empty alt" width="188" height="129"></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon Thames.</p>
</div>
- <p><strong>Example code 1: </strong></p>
+ <p><strong>Example code A: </strong></p>
<pre><h1>Medieval Nights</h1>
<p><img src="shalott.jpeg" <strong>alt=""</strong>></p>
<p>Join us for our medieval theme nights every Friday at
Boaters Bar,on the riverside, Kingston upon Thames.</p>
</pre>
- <p><strong>Example 2 Image in context: </strong></p>
+ <p><strong>Example B Image in context: </strong></p>
<div class="element1">
<p><b>Medieval Night</b></p>
<p><img src="images/shalott.jpg" alt="Painting of a woman in a white flowing dress, sitting in a small boat." width="188" height="129"></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon Thames.</p>
</div>
- <p><strong>Example code 2: </strong></p>
+ <p><strong>Example code B: </strong></p>
<pre><h1>Medieval Nights</h1>
-<figure><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></figure>
+<p><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar,
- on the riverside, Kingston upon Thames.</p></pre>
+ on the riverside, Kingston upon Thames.</p>
+</pre>
</div>
+<h5>Note: </h5>
+<p class="note">A number of examples in section 6.1 above include text alternatives for images that in context may be considered 'purely decorative'. Its status as 'purely decorative' cannot be authoritatively discerned and some users who access text alternatives have voiced a desire to have text alternatives provided (Refer to <a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a> and <a href="http://www.headstar.com/eablive/?p=106">Now You See It, Now You Don't</a>). Use in this context conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>] and <a href="#bib-HTML5">HTML5</a> [HTML5]. Its designation as conforming is a willful violation of <a href="#bib-HTMLLS">HTML Living Standard</a> [HTMLLS]</p>
<h4 id="hax">Related techniques and resources</h4>
<ul>
<li><a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a></li>
@@ -1207,13 +1239,13 @@
<p>Lola prefers a bath to a shower.</p>
</div>
<p><strong>Example code 1:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="1100670787_6a7c664aef.jpg" <strong>alt="Lola the cat sitting under an umbrella in the bath tub."</strong>>
<figcaption>Lola prefers a bath to a shower.</figcaption>
</figure>
</pre>
<p><strong>Example code 2:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="1100670787_6a7c664aef.jpg" <strong>alt="Photo of Lola the cat sitting under an umbrella in the bath tub."</strong>>
<figcaption>Lola prefers a bath to a shower.</figcaption>
</figure> </pre>
@@ -1228,7 +1260,7 @@
<p>The first of the ten cards in the Rorschach test.</p>
</div>
<p><strong>Code Example:</strong></p>
- <pre><figure>
+ <pre><figure role="group">
<img src="Rorschach1.jpg" <strong>alt="An abstract, free form inkblot."</strong>>
<figcaption>The first of the ten cards in the Rorschach test.</figcaption>
</figure> </pre>
@@ -1383,33 +1415,36 @@
<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. 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>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 an edequate 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>
<div class="element1">
<p><strong>My Photos > Photos of Clara</strong></p>
<p><img src="images/clara.jpg" alt="photo 1" width="400" height="344"></p>
- <p><strong>Photo 1: clara.jpg, taken on 12/11/2010.</strong></p>
+ <p><strong> clara.jpg, taken on 12/11/2010 (Photo 1).</strong></p>
</div>
<p><strong>Example code:</strong></p>
<pre><figure role="group">
<img src="clara.jpg" <strong>alt="Photo 1."</strong>>
-<figcaption><strong>clara.jpg, taken on 12/11/2010.</strong></figcaption><br></figure>
+<figcaption><strong>clara.jpg, taken on 12/11/2010 (photo 1).</strong></figcaption><br></figure>
</pre>
<h5 id="example-b">Example B: </h5>
<div class="element1">
<p><strong>My Photos > Photos of Clara</strong></p>
<p><img src="images/clara.jpg" alt="photo 1" width="400" height="344"></p>
- <p><strong>Photo 1: Clara in her bedroom, playing her 'electric' toy guitar.
-She looks like a real 'Rock & Roll' girl.</strong><strong></strong></p>
+ <p><strong> Clara in her bedroom, playing her 'electric' toy guitar.
+She looks like a real 'Rock & Roll' girl (photo1).</strong><strong></strong></p>
</div>
<p><strong>Example code:</strong></p>
<pre><figure role="group">
<img src="clara.jpg" <strong>alt="Photo 1."</strong>>
<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>
-
+She looks like a real 'Rock & Roll' girl (Photo 1).</strong></figcaption><br></figure></pre>
+
+</div>
+<h5>Note:</h5>
+<p class="note"> In examples A & B above, the <code>alt </code>attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the <code>alt</code> attribute in this context is allowed as a bridging technique until the <code>figure</code> and <code>figcaption</code> element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<div class="section" id="sec13">
<h3 id="captcha"><span class="secno">3.13 </span>CAPTCHA Images </h3>
@@ -1520,7 +1555,7 @@
<h3 id="altmethod"><span class="secno">4.1 </span>The <code>img</code> element <code>alt</code> attribute</h3>
<p>The primary method for providing text alternatives for images is by including text in the <code>img</code> element <code>alt</code> attribute. In graphical browsers the content of the alt attribute is typically displayed along with an indication (bordered area and/or an image icon) of the presence of an image when the image is not displayed, because the user has disabled image display or the image source information is incorrect. Assistive technologies such as screen readers will typically announce the presence of an image followed by the alt attribute content. Text based browsers may display the alt attribute content in brackets or in different colored text or as the content of a link to the image or as text without any indication of the image or prefixed with an indication of the image.</p>
<p><strong>Example:</strong></p>
-<pre><img src="example.jpg" <strong>alt="Alternative text."</strong>></pre>
+<pre><img src="example.jpg" <strong>alt="text alternative."</strong>></pre>
<h5 id="hd">Advantages:</h5>
<ul>
<li>Robust support in most graphical & non graphical web browsers and assistive technologies.</li>
@@ -1593,12 +1628,12 @@
</div> <p><strong>Code example:</strong></p>
-<pre><figure> <br><img src="shadows.jpg"> <br><figcaption><strong> Shadow like figures and a graffiti tag drawn on the walls of a
- partially demolished building, illuminated by the light from a street lamp. </strong></figcaption> <br></figure></pre>
+<pre><figure role="group"> <br><img src="shadows.jpg"> <br><figcaption><strong> Shadow like figures and a graffiti tag drawn on the walls of a
+ partially demolished building, illuminated by the light from a street lamp (photo). </strong></figcaption> <br></figure></pre>
</div>
<h5 id="hg">Advantages:</h5>
<ul>
- <li>When supported by browsers and assistive technology the content of the <code>figcaption</code> will be explicitly associated with the image.</li>
+ <li>When supported by browsers and assistive technology the content of the <code>figcaption</code> will be explicitly associated with the image. </li>
</ul>
<h5 id="hi">Disadvantages:</h5>
<ul>
@@ -1626,18 +1661,18 @@
</figure>
</div>
<p><strong>Code example: </strong></p>
- <pre><figure>
+ <pre><figure role="group">
<figcaption>The castle through the ages: 1423, 1756, and 1966 respectively.</figcaption>
</pre>
- <pre><figure>
+ <pre><figure role="group">
<img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">
<figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption>
</figure>
-<figure>
+<figure role="group">
<img src="castle-painting.jpg" alt="The castle now has two towers and two walls.">
<figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption>
</figure>
-<figure>
+<figure role="group">
<img src="castle-fluro.jpg" <br>alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
</figure><br>
@@ -1648,8 +1683,20 @@
<div class="section" id="secm7">
<h3 id="hv"><span class="secno">4.3 </span>The <code>img</code> element <code>title</code> attribute</h3>
<p>The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a text alternative for an image. The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a caption for an image, use the <code>figure</code> and <code>figcaption</code> elements to provide a caption, as described above.</p>
+<h5>Note:</h5>
+<p class="note">The use of title attribute to markup content that is intended to be available to all users is forbidden, because its use in this context results in content being hidden from keyboard only and touch device users and less usable/unusable for users with cognitive, fine motor skill or vision impairments. This is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5]</p>
</div>
</div>
+<h5>Further Information
+</h5>
+<p><a href="http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/">Using the HTML title attribute</a></p>
+<h3>WAI-ARIA methods</h3>
+<h3 id="aria-roles">4.4 Use of ARIA roles</h3>
+<h4 id="role-group">4.41 role=group</h4>
+<p class="note">to do</p>
+<h4 id="role-img">4.41 role=img</h4>
+<p class="note">to do</p>
+<p> </p>
<hr>
<div class="section" id="gloss">
<!--OddPage--><h2 id="glossary"><span class="secno">5. </span>Glossary</h2>
@@ -1672,7 +1719,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>
-<pre class="example"><img src="null.gif" <strong>alt=""</strong>></pre>
+<div class="example"><pre><img src="null.gif" <strong>alt=""</strong>></pre></div>
<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>
@@ -1696,29 +1743,13 @@
</div>
<div class="appendix section" id="references"><!--OddPage--><h2><span class="secno">A. </span>References</h2><div class="section" id="normative-references"><h3><span class="secno">A.1 </span>Normative references</h3><dl class="bibliography"><dt id="bib-HTML5">[HTML5]</dt><dd>Ian Hickson. <a href="http://dev.w3.org/html5/spec/spec.html"><cite>HTML 5.</cite></a> 4 November 2011. W3C Working Draft. (Work in progress.) URL: <a href="http://dev.w3.org/html5/spec/spec.html">http://dev.w3.org/html5/spec/spec.html</a>
</dd><dt id="bib-RFC2119">[RFC2119]</dt><dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key words for use in RFCs to Indicate Requirement Levels.</cite></a> March 1997. Internet RFC 2119. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
-</dd></dl></div><div class="section" id="informative-references"><h3><span class="secno">A.2 </span>Informative references</h3><dl class="bibliography"><dt id="bib-WAI-ARIA-PRACTICES">[WAI-ARIA-PRACTICES]</dt><dd>Michael Cooper; Richard Schwerdtfeger; Lisa Pappas. <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224"><cite>WAI-ARIA Best Practices.</cite></a> 24 February 2009. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224">http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224</a>
+</dd></dl></div><div class="section" id="informative-references"><h3><span class="secno">A.2 </span>Informative references</h3><dl class="bibliography">
+ <dt id="bib-HTMLLS">[HTMLLS]</dt>
+ <dd> Ian Hickson <a href="http://www.whatwg.org/html">HTML Living Standard</a>, 23 November 2011, URL: <a href="http://www.whatwg.org/html">http://www.whatwg.org/html</a> </dd>
+ <dt id="bib-WAI-ARIA-PRACTICES">[WAI-ARIA-PRACTICES]</dt><dd>Michael Cooper; Richard Schwerdtfeger; Lisa Pappas. <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224"><cite>WAI-ARIA Best Practices.</cite></a> 24 February 2009. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224">http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224</a>
</dd><dt id="bib-WCAG20">[WCAG20]</dt><dd>Michael Cooper; et al. <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211"><cite>Web Content Accessibility Guidelines (WCAG) 2.0.</cite></a> 11 December 2008. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2008/REC-WCAG20-20081211">http://www.w3.org/TR/2008/REC-WCAG20-20081211</a>
</dd><dt id="bib-WCAG20-TECHS">[WCAG20-TECHS]</dt><dd>Michael Cooper; et al. <a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211"><cite>Techniques for WCAG 2.0.</cite></a> 11 December 2008. W3C Note. URL: <a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211">http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211</a>
</dd></dl></div></div>
-<!-- Begin Web-Stat hit counter code -->
- <script type="text/javascript">
-<!--
-var page_name = 'html5:text altermatives (dev)';
-var invisible = '';
-var framed = 'no';
-function sE(){return true;}window.onError=sE;var base=document;
-if(framed=='yes'){base=top.document;}var rn=Math.random();
-var ui='mpaciello';var al='';
-var qry=ui+':2::'+escape(base.referrer)+'::'+screen.width
-+'x'+screen.height+'::'+screen.colorDepth+'::'+escape(page_name)
-+'::'+invisible+'::'+rn+'::'+escape(base.URL);
-document.write('<a href="http://www.web-stat.com/stats/');
-document.write(ui+'.htm"><img tabindex="0" src="http://server3.web-stat.com/count.pl?');
-document.write(qry+'" alt="'+al+'"/><\/a>');
-//-->
- </script>
- <noscript>
- <p> <a href="http://www.web-stat.com"> <img src="http://server3.web-stat.com/count.pl?mpaciello:2::NoJavaScript" alt=""> </a> </p>
- </noscript>
-<!-- End Web-Stat hit counter code -->
+
+
</body></html>
\ No newline at end of file
Received on Tuesday, 29 November 2011 14:40:12 UTC