- From: Robin Berjon via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 08 Oct 2012 10:37:33 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv12363
Modified Files:
wd.html
Log Message:
update snapshot to match published version
Index: wd.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/wd.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- wd.html 5 Oct 2012 09:24:14 -0000 1.1
+++ wd.html 8 Oct 2012 10:37:31 -0000 1.2
@@ -646,7 +646,6 @@
figure {margin:0px;}
figcaption {padding-bottom:1em;}
</style>
-<link type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
<style type="text/css">
.note { font-weight: bolder;
@@ -673,7 +672,7 @@
border: 1px dashed #FF0000;
background: #f5f5f5;
}
-</style><link type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD">
+</style>
<style type="text/css">
.note1 {color: green; background: transparent; font-family: sans-serif; }
.note1 { font-weight: bolder;
@@ -701,6 +700,7 @@
color: #900;
}
</style>
+<link type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD">
</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-working-draft-29-march-2012">W3C Working Draft 05 October 2012</h2>
@@ -882,7 +882,7 @@
<div class="section" id="conformance">
<h3><span class="secno">2.2 </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>
+ <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" 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>
@@ -934,8 +934,8 @@
</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>
- <li><a href="http://www.w3.org/TR/WCAG-TECHS/H30.html">Providing link text that describes the purpose of a link for anchor elements</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <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" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/WCAG-TECHS/H30.html">Providing link text that describes the purpose of a link for anchor elements</a> [<cite><a href="#bib-WCAG20-TECHS" class="bibref">WCAG20-TECHS</a></cite>]</li>
<li><a href="http://universalusability.com/access_by_design/links/alt-text.html">Use alt-text for image links</a></li>
<li><a href="http://www.cs.tut.fi/%7Ejkorpela/www/links.html">Links want to be Links</a></li>
</ul>
@@ -1068,8 +1068,8 @@
<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.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" 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" 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>
</ul>
</div>
@@ -1157,10 +1157,10 @@
</div>
<h4 id="has">Related techniques and resources</h4>
<ul>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null <code>alt</code> text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/C9.html">Using CSS to include decorative images (CSS)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F38.html">Failure: Omitting the alt-attribute for non-text content used for decorative purposes only in HTML</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F39.html">Failure: Providing a text alternative that is not null. (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null <code>alt</code> text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/C9.html">Using CSS to include decorative images (CSS)</a> [<cite><a href="#bib-WCAG20-TECHS" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F38.html">Failure: Omitting the alt-attribute for non-text content used for decorative purposes only in HTML</a> [<cite><a href="#bib-WCAG20-TECHS" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F39.html">Failure: Providing a text alternative that is not null. (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</a> [<cite><a href="#bib-WCAG20-TECHS" class="bibref">WCAG20-TECHS</a></cite>]</li>
</ul>
</div>
<div class="section" id="sec6">
@@ -1168,13 +1168,13 @@
<p>An image that isn't discussed directly by the
surrounding text but still has some relevance can be included in a page
using the <code>img</code> element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so
- still form part of the content. In these cases, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute <em title="must" class="rfc2119">must</em> be present but its
+ still form part of the content. In these cases, the <code title="attr-img-alt"><a href="http://dev.w3.org/html5/spec/the-img-element.html#attr-img-alt">alt</a></code> attribute <em title="must" class="rfc2119">must</em> be present but its
value <em title="may" class="rfc2119">may</em> be null. In cases where the image is closely related to the subject matter of the page content, the text alternative <em title="must" class="rfc2119">must</em> include a description of the content of the image or a description of the target of a linked page, if it is the content of a link. </p>
<h4 id="hat">Example 6.1</h4>
<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. 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>
+ 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="http://dev.w3.org/html5/spec/the-img-element.html#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" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott" width="338" height="234"></p>
<p><strong>Example code: </strong></p>
@@ -1238,9 +1238,9 @@
<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"></p>
+ <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>About this painting.</p>
- </a> </div>
+ </div>
<p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
</div>
<p><strong>Example code: </strong></p>
@@ -1290,8 +1290,8 @@
<li><a href="http://www.headstar.com/eablive/?p=106">Now You See It, Now You Don't</a> - Perspectives on decorative images by a screen reader user.</li>
<li><a href="http://www.rnib.org.uk/LIVINGWITHSIGHTLOSS/LEISURECULTURE/ARTSCRAFTS/PAINTING/Pages/audio_description_painting.aspx">Try audio describing a painting</a></li>
<li><a href="http://www.vsarts.org/x6020.xml">Blind Imagination: Pictures into Word</a></li>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H30.html">Providing link text that describes the purpose of a link for anchor elements</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F38.html">Providing a text alternative that identifies the purpose of 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.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H30.html">Providing link text that describes the purpose of a link for anchor elements</a> [<cite><a href="#bib-WCAG20-TECHS" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F38.html">Providing a text alternative that identifies the purpose of the non-text content</a> [<cite><a href="#bib-WCAG20-TECHS" class="bibref">WCAG20-TECHS</a></cite>]</li>
</ul>
</div>
<div class="section" id="sec7">
@@ -1313,13 +1313,13 @@
</div>
<h4 id="haz">Related techniques and resources</h4>
<ul>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null <code>alt</code> text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null <code>alt</code> text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" class="bibref">WCAG20-TECHS</a></cite>]</li>
</ul>
</div>
<div class="section" id="sec8">
<h3 id="icons"><span class="secno">3.8 </span>Icons</h3>
<p>An icon is usually a simple picture representing a program, action, data file or a concept. Icons are intended to help users of visual browsers to recognize features at a glance.</p>
- <p>In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, an empty <a href="#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em> provided. </p>
+ <p>In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, an empty <a href="http://dev.w3.org/html5/spec/the-img-element.html#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em> provided. </p>
<p>In other cases the icon adds emphasis to text content that needs to be conveyed textually, In such cases a text alternative <em title="must" class="rfc2119">must</em> be provided.</p>
<h4 id="hba">Example 8.1</h4>
<div class="example">
@@ -1562,7 +1562,7 @@
<p>In example A, a person uploads a photo to a photo sharing site, the <code>alt</code> attribute content identifies the image "photo 1" while the caption provides the image file name. Neither the <code>alt</code> nor the caption provide an adequate 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="warning5">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>
+ <p class="warning5">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" 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>
@@ -1615,7 +1615,7 @@
<div class="section" id="sec14">
<h3 id="logos"><span class="secno">3.14 </span>Logos, insignia, flags, or emblems</h3>
<p>Many pages include logos, insignia, flags, or emblems, which stand for a company, organization, project, band, software package, country, or other entity.</p>
- <p>If the logo is the sole content of a link, the <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> contain a brief description of the link target.</p>
+ <p>If the logo is the sole content of a link, the <a href="http://dev.w3.org/html5/spec/the-img-element.html#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em> contain a brief description of the link target.</p>
<h4 id="141">Example 14.1</h4>
<div class="example">
<p><strong>Example:</strong></p>
@@ -1627,7 +1627,7 @@
<img src="HTML5_Logo.png" <strong>alt="HTML5 specification"</strong>></a></pre>
</div>
<h4 id="142">Example 14.2</h4>
- <p>If the logo is being used to represent the entity, e.g. as a page heading, the <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> contain the name of the entity being represented by the logo. The <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute <em title="should not" class="rfc2119">should not</em> contain text like the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity itself. </p>
+ <p>If the logo is being used to represent the entity, e.g. as a page heading, the <a href="http://dev.w3.org/html5/spec/the-img-element.html#attr-img-alt">alt</a> attribute <em title="must" class="rfc2119">must</em> contain the name of the entity being represented by the logo. The <a href="http://dev.w3.org/html5/spec/the-img-element.html#attr-img-alt">alt</a> attribute <em title="should not" class="rfc2119">should not</em> contain text like the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity itself. </p>
<div class="example">
<p><strong>Example:</strong></p>
<div class="element1">
@@ -1640,7 +1640,7 @@
</pre>
</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/the-img-element.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="element1">
@@ -1811,6 +1811,7 @@
<figure role="group"><img src="images/castle-fluro.jpg" alt="The castle lies in ruins, the original tower all that remains in one piece." width="350" height="336" border="0">
<figcaption>Film photograph. <span lang="fr">Séraphin Médéric Mieusement</span>, 1936.</figcaption>
</figure>
+ </figure>
</div>
<p><strong>Code example: </strong></p>
<pre><figure role="group">
Received on Monday, 8 October 2012 10:37:38 UTC