- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 15 Apr 2011 15:11:16 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv12434
Modified Files:
Overview.html
Log Message:
added and updated techniques
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.62
retrieving revision 1.63
diff -u -d -r1.62 -r1.63
--- Overview.html 25 Mar 2011 11:24:09 -0000 1.62
+++ Overview.html 15 Apr 2011 15:11:14 -0000 1.63
@@ -157,7 +157,16 @@
}
- </style>
+ .inline {
+ font-size: x-large;
+
+}
+
+.inline img {
+ border:none;
+
+}
+</style>
<!-- <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD"> -->
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css">
<style type="text/css">
@@ -166,11 +175,16 @@
color: #900;
font-size: x-large;
}
+ .warning4 { font-weight: bolder;
+ font-style: italic;
+ color: #900;
+ font-size: large;
+}
</style>
</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"><abbr title="World Wide Web Consortium">W3C</abbr> Editor's Draft 27 January 2011</h2>
+<h2 id="w3c-working-draft-05-may-2010"><abbr title="World Wide Web Consortium">W3C</abbr> Editor's Draft 15 April 2011</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>
@@ -202,19 +216,21 @@
</li>
<li><a href="#Recommendations">Requirements and Recommendations</a>:
<ul>
- <li><a href="#button-image-only">1. A link or button containing nothing but an image</a></li>
+ <li><a href="#button-image-only">1. A link or button containing only an image</a></li>
<li><a href="#graphical-representations">2. Graphical representations: charts, diagrams, graphs, maps, illustrations</a></li>
<li><a href="#img-of-text">3. Images of text</a></li>
<li><a href="#images-include-text">4. Images that include text</a></li>
<li><a href="#decorative">5. A purely decorative image that doesn't add any information</a></li>
<li><a href="#images-enhance">6. Images that enhance the themes or subject matter of the page content</a></li>
<li><a href="#img-not-for-user">7. An image not intended for the user</a></li>
- <li><a href="#icons">8. Icons and logos</a></li>
+ <li><a href="#icons">8. Icons </a></li>
<li><a href="#pictures">9. Images of Pictures</a></li>
<li><a href="#webcam">10. Webcam images</a></li>
<li><a href="#imgslices">11. A group of images that form a single larger picture with and without links</a></li>
<li><a href="#unknown">12. When a text alternative is unknown at the time of publication</a></li>
<li><a href="#captcha">13. CAPTCHA images</a></li>
+ <li><a href="#logos">14. Logos, insignia, flags, or emblems</a></li>
+ <li><a href="#inline">15. Inline images</a></li>
</ul>
</li>
<li><a href="#methods">Methods for Providing Text Alternatives</a>
@@ -269,7 +285,7 @@
<h2 id="recommendations">Requirements and Recommendations:</h2>
<p>The requirements and recommendations for the <code><a href="http://dev.w3.org/html5/markup/img.html#img.attrs.alt">alt</a></code> attribute depend on what the image is intended to represent and the context in which it is used, as described in the following sections. Each section includes a description, code and graphical examples and links to related techniques.</p>
-<h3 id="button-image-only"><span class="secno">1.</span> A link or button containing nothing but an image</h3>
+<h3 id="button-image-only"><span class="secno">1.</span> A link or button containing only an image</h3>
<p>When an <a href="http://dev.w3.org/html5/markup/a.html#a">a</a> element that is a hyperlink, or a <code><a href="http://dev.w3.org/html5/markup/button.html#button">button</a></code> element, has no text content but contains one or more images, the <code>alt</code> attributes MUST contain text that together convey the purpose of the link or button.</p>
<h4 id="hab">Example 1.1</h4>
<div class="example">
@@ -304,10 +320,26 @@
<img src="blue.jpg" <strong>alt="B"</strong>></button></abbr>
</pre>
<p>However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.</p>
+</div>
+<h4 id="hac3">Example 1.3</h4>
+<div class="example">
+ <p>In this example, a link contains a logo. The link points to the W3C web site. The text alternative is a brief description of the link target.</p>
+ <p><strong>Example Rendering:</strong></p>
+ <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr></p>
+ <p><strong>Example code:</strong></p>
+ <pre><abbr title="World Wide Web Consortium">
+<a href="http://w3.org">
+<img src="images/w3c_home.png" width="72" height="48" <strong>alt="W3C web site"</strong>>
+</a>
+</abbr>
+</pre>
+ <p> </p>
</div>
+<p> </p>
<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> (WCAG technique)</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> (WCAG technique)</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/~jkorpela/www/links.html">Links want to be Links</a></li>
</ul>
@@ -390,7 +422,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 SHOULD be provided. in this case in the form of a data table using the data that is represented in the chart image. </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 SHOULD 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" width="407" height="341" alt="Bar Chart showing rainfall in millimetres by Country and Season."></p>
@@ -407,27 +439,27 @@
</tr>
<tr>
<th scope="row">Spring</th>
- <td>5.5</td>
+ <td>5.5 (highest)</td>
<td>2.4</td>
- <td>2</td>
+ <td>2 (lowest)</td>
</tr>
<tr>
<th scope="row">Summer</th>
- <td>4.5</td>
+ <td>4.5 (highest)</td>
<td>3.4</td>
- <td>2</td>
+ <td>2 (lowest)</td>
</tr>
<tr>
<th scope="row">Autumn</th>
- <td>3.5</td>
+ <td>3.5 (highest)</td>
<td>1.8</td>
- <td>1.5</td>
+ <td>1.5 (lowest)</td>
</tr>
<tr>
<th scope="row">Winter</th>
- <td>1.5</td>
+ <td>1.5 (highest)</td>
<td>1.2</td>
- <td>1</td>
+ <td>1 (lowest)</td>
</tr>
</table>
@@ -438,7 +470,7 @@
<pre>
<p><img src="rainchart.gif" <strong>alt="Bar Chart showing average rainfall in millimetres by country and season."</strong><strong></strong>></p>
-<table><br><caption><br>Rainfall in millimetres by Country and Season.<br></caption><br><tr><br> <td></td><th scope="col">UK</th><th scope="col">Japan</th><th scope="col">Australia</th><br></tr><br><tr><br> <th scope="row">Spring</th><td>5.5</td><td>2.4</td><td>2</td><br></tr><br><tr><br> <th scope="row">Summer</th><td>4.5</td><td>3.4</td><td>2</td><br></tr><br><tr><br> <th scope="row">Autumn</th><td>3.5</td><td>1.8</td><td>1.5</td><br></tr><br><tr><br> <th scope="row">Winter</th><td>1.5</td><td>1.2</td><td>1</td><br></tr><br></table></pre>
+<table><br><caption><br>Rainfall in millimetres by Country and Season.<br></caption><br><tr><br> <td></td><th scope="col">UK</th><th scope="col">Japan</th><th scope="col">Australia</th><br></tr><br><tr><br> <th scope="row">Spring</th><td>5.5 (highest)</td><td>2.4</td><td>2 (lowest)</td><br></tr><br><tr><br> <th scope="row">Summer</th><td>4.5 (highest)</td><td>3.4</td><td>2 (lowest)</td><br></tr><br><tr><br> <th scope="row">Autumn</th><td>3.5 (highest)</td><td>1.8</td><td>1.5 (lowest)</td><br></tr><br><tr><br> <th scope="row">Winter</th><td>1.5 (highest)</td><td>1.2</td><td>1 lowest</td><br></tr><br></table></pre>
</div>
<h4 id="hah">Related techniques and resources</h4>
<ul>
@@ -512,7 +544,7 @@
<h5 id="hap"> </h5>
</div>
<h4 id="haq">Related techniques and resources</h4>
-<p><span class="note">to do</span></p>
+<p><a href="http://www.w3.org/TR/WCAG-TECHS/H30.html"></a></p>
<h3 id="decorative"><span class="secno">5. </span>A purely decorative image that doesn't add any information</h3>
<p><A href="http://www.w3.org/TR/WCAG20/#puredecdef">Purely decorative</A> images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images. They have no meaning in themselves and do not provide page <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A>.</p>
<p>Purely decorative images MUST 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 MUST be empty.</p>
@@ -611,7 +643,7 @@
</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><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>
+<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>
<div class="element1">
@@ -958,37 +990,33 @@
<LI><A title="http://www.w3.org/TR/WCAG20-TECHS/G143.html" href="http://www.w3.org/TR/WCAG20-TECHS/G143.html">Providing a text alternative that describes the purpose of the CAPTCHA</A> W3C Note. </LI>
<LI><A title="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G144.html" href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G144.html">Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</A> W3C Note. </LI>
</UL>
-<h3 id="logos">13. Logos</h3>
-<p class="note">to do</p>
-<!-- <p>Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such as a company, organization, project, band, software package, country, or some such.</p>
-<p>If the logo is being used to represent the entity, e.g. as a page heading, the <A href="#attr-img-alt">alt</A> attribute MUST contain the name of the entity being represented by the logo. Though not recommended, the <A href="#attr-img-alt">alt</A> attribute may<EM></EM> contain text like the word "logo", as the visual style often conveys to the user that it is a logo for the company, but users who can't benefit from the visual information may appreciate the added information about what the image is.</p>
-<p>If the logo is being used next to the name of the entity that it represents, then the logo is supplemental, and its <A href="#attr-img-alt">alt</A> attribute must instead be empty.</p>
-<p>If the logo is merely used as decorative material (as branding, or, for example, as a side image in an article that mentions the entity to which the logo belongs), then the entry below on purely decorative images applies. If the logo is actually being discussed, then it is being used as a phrase or paragraph (the description of the logo) with an alternative graphical representation (the logo itself), and the first entry above applies.</p>
-<DIV>
- <p>In the following snippets, all four of the above cases are present. First, we see a logo used to represent a company:</p>
- <PRE><h1><STRONG><img src="XYZ.gif" alt="The XYZ company"></STRONG></h1></PRE>
- <p>Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have any alternative text: </p>
- <PRE><article> <h2>News</h2> <p>We have recently been looking at buying the <STRONG><img src="alpha.gif" alt=""> ΑΒΓ company</STRONG>, a small Greek company specializing in our type of product.</p></PRE>
- <p>In this third snippet, we have a logo being used in an aside, as part of the larger article discussing the acquisition:</p>
- <PRE> <STRONG><aside><p><img src="alpha-large.gif" alt=""></p></aside></STRONG> <p>The ΑΒΓ company has had a good quarter, and our pie chart studies of their accounts suggest a much bigger blue slice than its green and orange slices, which is always a good sign.</p> </article></PRE>
- <p>Finally, we have an opinion piece talking about a logo, and the logo is therefore described in detail in the alternative text.</p>
- <PRE><p>Consider for a moment their logo:</p> <STRONG><p><img src="/images/logo" alt="It consists of a green circle with a green question mark centered inside it."></p></STRONG> <p>How unoriginal can you get? I mean, oooooh, a question mark, how <em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm sure everyone will rush to adopt those specifications now! They could at least have tried for some sort of, I don't know, sequence of rounded squares with varying shades of green and bold white outlines, at least that would look good on the cover of a blue book.</p></PRE>
- <p>This example shows how the alternative text should be written such that if the image isn't <em title="img-available"><A href="#img-available">available</A></em>, and the text is used instead, the text flows seamlessly into the surrounding text, as if the image had never been there in the first place.</p>
-</DIV>
-
-<H4 id="hbn">Example 14.1</H4>
-<p>This example shows a <a href="http://recaptcha.net/learnmore.html">CAPTCHA test</a> which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content. </p>
+<h3 id="logos">14. 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 MUST contain a brief description of the link target.</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/embedded-content-1.html#attr-img-alt">alt</a> attribute MUST 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 SHOULD NOT 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 next to the name of the entity 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 MUST instead be empty.</p>
+<p>If the logo is used as decorative material (as branding, or, for example, as a side image in an article that mentions the entity to which the logo belongs), then the advice on <a href="#decorative">purely decorative images</a> applies. If the logo is actually being discussed, then it is being used as a phrase or paragraph (the description of the logo) with an alternative graphical representation (the logo itself), and the first entry above applies.</p>
+<p><span class="note">to do</span></p>
+<h3 id="inline">15. Inline images</h3>
+<p>When images are used inline as part of the flow of text in a sentence, the text alternative MUST be a word or phrase that makes sense in the context of the sentence it is contained in.</p>
<div class="example">
<p><strong>Example Image:</strong></p>
- <p><img src="images/captcha.gif" alt="captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted," width="270" height="60"></p>
+ <div class="element1">
+ <p><span class="inline">I <img src="images/heart.png" width="27" height="24" alt="love"> you.</span></p>
+ </div>
<p><strong>Example code:</strong> </p>
+ <PRE>I <img src="heart.png" <strong>alt="love"</strong>> you.
+</PRE>
+
+ <p><strong>Example Image:</strong></p>
+ <div class="element1">
+ <p><span class="inline">My <img src="images/heart.png" width="27" height="24" alt="love"> breaks.</span></p>
+ </div>
+ <p><strong>Example code:</strong></p>
+ <PRE>I <img src="heart.png" <strong>alt="breaks"</strong>> you.</PRE>
</div>
-<H4 id="hbo">Further Techniques</H4>
-<UL>
- <LI><A title="http://www.w3.org/TR/WCAG20-TECHS/G143.html" href="http://www.w3.org/TR/WCAG20-TECHS/G143.html">Providing a text alternative that describes the purpose of the CAPTCHA</A> W3C Note. </LI>
- <LI><A title="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G144.html" href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G144.html">Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</A> W3C Note. </LI>
-</UL>
- -->
+<H4 id="hbm">Further Techniques </H4>
+<p class="note">to do</p>
<hr>
<h2 id="methods2">Methods for Providing Text Alternatives</h2>
<h3 id="native">Native HTML methods</h3>
Received on Friday, 15 April 2011 15:11:22 UTC