- From: poot <cvsmail@w3.org>
- Date: Tue, 29 Jun 2010 23:58:50 +0900 (JST)
- To: public-html-diffs@w3.org
steve: added internal links and modified example 6.1 in response to
feedback.
http://dev.w3.org/cvsweb/html5/alt-techniques/Overview.html?r1=1.49&r2=1.50&f=h
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.49
retrieving revision 1.50
diff -u -d -r1.49 -r1.50
--- Overview.html 28 Jun 2010 15:09:11 -0000 1.49
+++ Overview.html 29 Jun 2010 14:58:25 -0000 1.50
@@ -109,7 +109,7 @@
</head>
<body>
<div class="head"><p><a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C"></a></p><h1 class="title" id="title">HTML5: Techniques for providing useful text alternatives</h1>
-<h2 id="w3c-working-draft-05-may-2010"><acronym title="World Wide Web Consortium">W3C</acronym> Editor's Draft 28 June 2010</h2>
+<h2 id="w3c-working-draft-05-may-2010"><acronym title="World Wide Web Consortium">W3C</acronym> Editor's Draft 29 June 2010</h2>
<dl><!-- <dt>This version:</dt>
<dd><a href="http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/">http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/</a></dd><dt>Latest published version:</dt> -->
<!-- <dd><A href="http://www.w3.org/TR/html-alt-techniques/">http://www.w3.org/TR/html-alt-techniques/</A> </dd> --><dt>Latest editor's draft:</dt><dd><a href="http://dev.w3.org/html5/alt-techniques/">http://dev.w3.org/html5/alt-techniques/</a></dd>
@@ -123,7 +123,7 @@
<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></div>
<div id="sotd" class="introductory section">
<h2 id="status">Status of This Document</h2><p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <acronym title="World Wide Web Consortium">W3C</acronym> publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/"><acronym title="World Wide Web Consortium">W3C</acronym> technical reports index</a> at <a href="http://www.w3.org/TR/">http://www.w3.org/TR/</a>.</em></p>
- <p>This is a First Public Working Draft.</p>
+ <!--<p>This is a First Public Working Draft.</p> -->
<p>The latest stable version of the editor's draft of this specification is
always available on <a href="http://dev.w3.org/html5/alt-techniques/">the <acronym title="World Wide Web Consortium">W3C</acronym> CVS
server</a>.
@@ -156,19 +156,20 @@
</li>
<li><a href="#methods">Methods for Providing Text Alternatives</a>
<ul>
- <li><a href="#altmethod">The img element alt attribute</a>
+ <li><a href="#altmethod">The img element alt attribute</a>
<ul>
+ <li><a href="#replacement">Is alt attribute content a replacement for an image?</a></li>
<li><a href="#empty">Using an empty alt attribute</a></li>
- <li>What length should a text alternative be</li>
+ <li><a href="#he">How long should a short text alternative be?</a></li>
</ul>
</li>
- <li>The figure and figcaption elements</li>
- <li>The aria-labelledby and aria-describedby attributes</li>
- <li>Linked text content within the same document or another document</li>
- <li>Text content placed next to an image </li>
- <li>The img element title attribute</li>
- <li>The img element longdesc attribute</li>
- </ul>
+ <li><a href="#hf">The figure and figcaption elements</a></li>
+ <li><a href="#hj">The aria-labelledby and aria-describedby attributes</a></li>
+ <li><a href="#hq">Text content within the same document or another document</a></li>
+ <li><a href="#hs">Text content placed next to an image</a></li>
+ <li><a href="#hv">The img element title attribute</a></li>
+ <li><a href="#hy">The img element longdesc attribute</a></li>
+ </ul>
</li>
<li><a href="#Recommendations">Requirements and Recommendations</a>:
<ul>
@@ -188,7 +189,7 @@
</ul>
</li>
<li><a href="#glossary">Glossary</a></li>
-</ul>
+ </ul>
</div>
<h2 id="intro">Introduction</h2>
<H3 id="text-alt">Text Alternatives</H3>
@@ -196,7 +197,7 @@
<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 either 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>
- <li>They have a very slow connection. </li>
+ <li>They have a very slow connection and are browsing with images disabled.</li>
<li>They have a vision impairment and use text to speech software. </li>
<li>They have a cognitive impairment and use text to speech software. </li>
<li>They
@@ -267,8 +268,6 @@
<h6 id="he">How long should a short text alternative be?</h6>
<p>The answer to this question very much depends on the context an image is being used in. While there are no definitive right or wrong lengths for text alternatives provided using the <code>img</code> elements <code>alt</code> attribute, the general consensus is that if the text alternative is longer than 75-100 characters (1 to 2 sentences), it should not be considered a short text alternative and should not be presented using the <code>alt </code>attribute.</p>
<p><span class="note">To do</span></p>
-<h6> </h6>
-<p> </p>
<h3 id="hf">The <code>figure</code> and <code>figcaption</code> elements</h3>
<p><span class="note">to do</span></p>
<h5 id="hg">Advantages:</h5>
@@ -308,8 +307,6 @@
</ul>
<h3 id="hq">Text content within the same document or another document</h3>
<p><span class="note">to do</span></p>
-<h5 id="hr"> </h5>
-
<h3 id="hs">Text content next to or prior to an image </h3>
<p><span class="note">to do</span></p>
<h5 id="ht">Advantages:</h5>
@@ -580,25 +577,32 @@
<div class="example">
<p>Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An
image of a painting inspired by a poem, on a page reciting that
- poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. The description of the content of the image would be redundant for users who can view the image, so the appropriate place to put it is in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute. </p>
+ poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. There is a short description of the content of the image in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute and a link below the image to a longer description located at the bottom of the document. At the end of the longer description there is also a <a href="http://bit.ly/5HJvVZ">link to further information</a> about the painting.</p>
<p><strong>Example Image </strong></p>
<p><img src="images/shalott.jpg" width="338" height="234" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott"> </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><img src="shalott.jpeg" <strong>alt="A painting of a young women with long hair sitting in a wooden boat,
-she is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side.
-In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix
-lying in front of her. Beside it are three candles. Two have blown out."</strong>></figure>
+<figure>
+<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. -->
-<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
+...
+...
+...
+<p id="des"><strong>The woman in the painting is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side.
+In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix lying in front of her.
+Beside it are three candles. Two have blown out.</strong>
+<strong><a href="http://bit.ly/5HJvVZ">Further information about the painting</a>.</strong></p></pre>
</div>
<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 title has been included on the link for sighted mouse users, the title 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, 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><strong>Example image in context: </strong></p>
<div class="element1">
<p><strong>The Lady of Shalott</strong><br>
@@ -634,20 +638,23 @@
</pre>
</div> -->
Example 6.3</h4>
+<p>This example is similar to the previous example as it also contains a link pointing to an external source of information about the painting. The difference being that text is included after the image as content of the link. </p>
+<p><strong>Note:</strong> In HTML5 unlike HTMl 4 <a href="http://html5doctor.com/block-level-links-in-html-5/">links can contain 'block level' elements</a> such as <code>p</code> elements. The example below makes use of this change.</p>
<div class="example">
<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><a href="http://bit.ly/5HJvVZ"><img src="images/shalott.jpg" width="302" height="212" alt="Painting of a woman in a white flowing dress, sitting in a small boat."></a></p>
- <p><a href="http://bit.ly/5HJvVZ">Information about this painting.</a></p>
+ <p><a href="http://bit.ly/5HJvVZ">About this painting.</a></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">
<img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>>
-<p><strong>Information about this painting.</strong></p></a></figure>
+<p><strong>About this painting.</strong></p></a></figure>
+
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
<h4 id="haw">Example 6.4</h4>
@@ -679,7 +686,7 @@
<figure><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></figure>
<p>Members and friends of the blind and low vision users group are invited to a medieval
-theme night on Friday at Boaters Bar, on the riverside, Kingston upon Thames.</p></pre>
+theme night on Friday at Boaters Bar, on the riverside, Kingston upon Thames.</p></pre>
</div>
<h4 id="hax">Related techniques and resources</h4>
<ul>
@@ -1025,4 +1032,4 @@
<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>
<h2 id="acknowledgements">Acknowledgements</h2>
<p class="note">In no particular order and incomplete.</p>
-<p>Laura Carlson, Josh O Connor, Gez Lemon, Anne van Kesteren, Ian Hickson, Mike Smith, Mike Paciello, Bim Egan, Gregory Rosmaita, Michael Cooper, Janina Sajka, Matt May, Bevi Chagnon, Jonathan Avila, Pat Rees, Charlie Pike, Andy Maseyk</p>
+<p>Laura Carlson, Josh O Connor, Gez Lemon, Anne van Kesteren, Ian Hickson, Mike Smith, Mike Paciello, Bim Egan, Gregory Rosmaita, Michael Cooper, Janina Sajka, Matt May, Bevi Chagnon, Jonathan Avila, Pat Rees, Charlie Pike, Andy Maseyk, Rich Clark</p>
Received on Tuesday, 29 June 2010 14:59:19 UTC