- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 15 May 2012 09:07:45 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv15549
Modified Files:
Overview.html
Log Message:
typos and stuff
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.103
retrieving revision 1.104
diff -u -d -r1.103 -r1.104
--- Overview.html 29 Mar 2012 09:00:47 -0000 1.103
+++ Overview.html 15 May 2012 09:07:43 -0000 1.104
@@ -672,7 +672,8 @@
border: 1px dashed #FF0000;
background: #f5f5f5;
}
-</style><link charset="utf-8" type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD">
+</style><!-- <link charset="utf-8" type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD"> -->
+<link charset="utf-8" type="text/css" rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED">
<style type="text/css">
.note1 {color: green; background: transparent; font-family: sans-serif; }
.note1 { font-weight: bolder;
@@ -702,7 +703,10 @@
</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-working-draft-29-march-2012">W3C Working Draft 29 March 2012</h2>
+<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 08 May 2012</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>
+<!-- <h2 id="w3c-working-draft-29-march-2012">W3C Working Draft 29 March 2012</h2>
<dl>
<dt>This version:</dt>
@@ -717,10 +721,10 @@
<dd><a href="http://www.w3.org/TR/2011/WD-html-alt-techniques-20110113/">http://www.w3.org/TR/2011/WD-html-alt-techniques-20110113/</a></dd>
<dd><a href="http://www.w3.org/TR/2010/WD-html-alt-techniques-20101019/">http://www.w3.org/TR/2010/WD-html-alt-techniques-20101019/</a></dd>
-<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>
+<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>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> © 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></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>
+<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> � 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>�</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></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>Abstract</h2>
@@ -886,7 +890,7 @@
</div>
<h4 id="hac31">Example 1.3</h4>
<div class="example">
- <p>In this example, a link contains a print preview icon. The link points to the a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.</p>
+ <p>In this example, a link contains a print preview icon. The link points to a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.</p>
<p><strong>Example Rendering:</strong></p>
<p><img src="images/preview.png" width="32" height="30" alt="Preview the printed page."></p>
<p><strong>Example code:</strong></p>
@@ -955,7 +959,7 @@
<h4 id="hag">Example 2.4</h4>
<div class="example">
<p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the containing <code>figure</code> element. </p>
- <p><strong>Note:</strong> The the longer text alternative is structured using an ordered list.</p>
+ <p><strong>Note:</strong> The longer text alternative is structured using an ordered list.</p>
<p><strong>Example Image in context:</strong></p>
<div class="element1">
<p><img src="images/flowchart.gif" alt="A flowchart process for dealing with a non-functioning lamp." width="221" height="299"></p>
@@ -979,7 +983,7 @@
</div>
<h4 id="hag21">Example 2.5</h4>
<div class="example">
- <p>In this example, there is an image of a chart, It would be inappropriate to provide the information depicted in the chart as a prose text alternative as the information is a data set. Instead a structured text alternative alternative <em title="should" class="rfc2119">should</em> be provided. in this case in the form of a data table using the data that is represented in the chart image. Note that indications of the highest and lowest rainfall for each season has been included in the table, so that an indication of trends easily identified in the chart are also available in the data table.</p>
+ <p>In this example, there is an image of a chart. It would be inappropriate to provide the information depicted in the chart as a prose text alternative as the information is a data set. Instead a structured text alternative alternative <em title="should" class="rfc2119">should</em> be provided. in this case in the form of a data table using the data that is represented in the chart image. Note that indications of the highest and lowest rainfall for each season has been included in the table, so that an indication of trends easily identified in the chart are also available in the data table.</p>
<p><strong>Example Image in context:</strong></p>
<div class="element1">
<p><img src="images/table.gif" alt="Bar Chart showing rainfall in millimetres by Country and Season." width="407" height="341"></p>
@@ -1064,15 +1068,8 @@
<p><strong>Example Image:</strong></p>
<p><img src="images/sale.gif" alt="The big sale ends Friday." width="400" height="190"></p>
<p><strong>Example code:</strong></p>
- <pre><p><img src="sale.gif" <strong>alt="The BIG sale ...ends Friday."</strong>></p></pre>
- <h5 id="hak">Advantages:</h5>
- <ul>
- <li>Text alternative is explicitly associated with the image.</li>
- </ul>
- <h5 id="hal">Disadvantages:</h5>
- <ul>
- <li>When text is represented in an image the text cannot be restyled to suit users needs.</li>
- </ul>
+ <pre><p><img src="sale.gif" <strong>alt="The BIG sale ...ends Friday."</strong>></p>
+</pre>
</div>
<h4 id="ham">Related techniques and resources</h4>
<ul>
@@ -1086,8 +1083,7 @@
<div class="example">
<p>Consider an image containing a pie chart and associated text. It is recommended wherever possible to provide any associated text as text, not an image of text. If this is not possible include the text in the text alternative.</p>
<p><strong>Example Image:</strong></p>
- <p><img src="images/figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category.
-Pie chart: Language=68%, Education=14% and Science=18%." id="piechart" width="500" height="300"></p>
+ <p><img src="images/figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category. Pie chart: Language=68%, Education=14% and Science=18%." id="piechart" width="500" height="300"></p>
<p><strong>Example code:</strong></p>
<pre><p><img src="figure1.gif" <strong>alt="Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%."</strong>></p></pre>
@@ -1104,7 +1100,7 @@
</figure></pre>
</div>
<h5 id="note1">Note: </h5>
- <p class="note1">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>
+ <p class="note1">In example 4.2 above, the <code>alt</code> attribute is used as 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">
<h3 id="decorative"><span class="secno">3.5 </span>A purely decorative image that doesn't add any information</h3>
@@ -1112,7 +1108,7 @@
<p>Purely decorative images <em title="must" class="rfc2119">must</em> be marked up so they can be ignored by <a href="http://www.w3.org/TR/WCAG20/#atdef">assistive technology</a> with a null alt attribute (alt="") or preferably use CSS techniques. If the image isn't providing the user any informative <a href="http://www.w3.org/TR/WCAG20/#contentdef">content</a> or enhancing greater understanding of the <a href="http://www.w3.org/TR/WCAG20/#contentdef">content</a>, then the alt attribute <em title="must" class="rfc2119">must</em> be empty.</p>
<h4 id="har">Example 5.1</h4>
<div class="example">
- <p>Here's an example of an image being used as a decorative banner for a persons blog, the image offers no information and so should have an empty alt attribute. While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.</p>
+ <p>Here's an example of an image being used as a decorative banner for a person's blog, the image offers no information and so should have an empty alt attribute. While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.</p>
<p><strong>Example image in context:</strong></p>
<div class="element1">
<p><img src="images/border.gif" alt="" width="400" height="30"></p>
@@ -1129,8 +1125,8 @@
<ul>
<li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null alt 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">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">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/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>
</ul>
</div>
<div class="section" id="sec6">
@@ -1167,7 +1163,7 @@
<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, 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>In this example of the same image, there is a short text alternative included in the alt attribute, and there is a link after the image. The link 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>
@@ -1253,7 +1249,7 @@
</pre>
</div>
<h5 id="note2">Note: </h5>
- <p class="note1">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>
+ <p class="note1">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 [<a href="#bib-WCAG20">WCAG 2.0</a>] and [<a href="#bib-HTML5">HTML5</a>]. 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>
@@ -1328,7 +1324,7 @@
</div>
<h4 id="hbc">Example 8.3</h4>
<div class="example">
- <p>In this example, we have a warning message, with a warning icon. The word "Warning!" is in emphasized text next the the icon. In this case the icon is redundant and therefore the <code>img </code>element <em title="must" class="rfc2119">must</em> have an empty <code>alt</code> attribute. It would also be appropriate to add the icon using CSS.</p>
+ <p>In this example, we have a warning message, with a warning icon. The word "Warning!" is in emphasized text next to the icon. In this case the icon is redundant and therefore the <code>img </code>element <em title="must" class="rfc2119">must</em> have an empty <code>alt</code> attribute. It would also be appropriate to add the icon using CSS.</p>
<p><strong>Example Image in context: </strong></p>
<div class="element1">
<p><img src="images/warning.gif" alt="Warning!" width="38" height="30"> <strong>Warning!</strong> Your session is about to expire.</p>
@@ -1557,7 +1553,7 @@
She looks like a real 'Rock & Roll' girl (Photo 1).</strong></figcaption><br></figure></pre>
</div>
<h5 id="note3">Note:</h5>
- <p class="note1"> 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 recommended 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>
+ <p class="note1"> In examples A & B above, the <code>alt </code>attribute is used as 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 recommended 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 [<a href="#bib-WCAG20">WCAG 2.0</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>
@@ -1763,7 +1759,7 @@
partially demolished building, illuminated by the light from a street lamp <strong>(photo 1). </strong><br></figcaption> <br></figure></pre>
</div>
<h5 id="note4">Note:</h5>
- <p class="note1"> In example C 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. The use of the <code>alt</code> attribute in this context is recommended 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>
+ <p class="note1"> In example C above, the <code>alt </code>attribute is used as 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 recommended 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 [<a href="#bib-WCAG20">WCAG 2.0</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<h4 id="nested">4.2.1 Using nested <code>figure</code> elements </h4>
<p>In cases where there is a group of related images each having an associated caption, it is recommended that nested <code>figure</code> and <code>figcaption</code> elements be used. </p>
Received on Tuesday, 15 May 2012 09:07:54 UTC