- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 11 May 2010 10:18:05 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv17759
Modified Files:
Overview.html
Log Message:
fixed some broken links
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.23
retrieving revision 1.24
diff -u -d -r1.23 -r1.24
--- Overview.html 10 May 2010 14:35:09 -0000 1.23
+++ Overview.html 11 May 2010 10:18:03 -0000 1.24
@@ -237,7 +237,7 @@
</head>
<body>
<h1>HTML5: Techniques for providing useful text alternatives</h1>
-<h2>Editor's Draft 5th May 2010</h2>
+<h2>Editor's Draft 11th May 2010</h2>
<h3>Editor:</h3>
<p><a href="mailto:sfaulkner@paciellogroup.com">Steve Faulkner</a>, The Paciello Group.</p>
<hr>
@@ -422,13 +422,9 @@
<p> </p>
<hr>
<h2 id="recommendations">Requirements and Recommendations:</h2>
-<p>The requirements and recommendations for the <code title="attr-img-alt"><a href="#attr-img-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>
-<p>When an <a href="#the-a-element">a</a> element that is a <a href="history.html#hyperlink">hyperlink</a>,
- or a <code><a href="forms.html#the-button-element">button</a></code> element, has no text content but
- contains one or more images, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attributes MUST contain text that
- together convey the purpose of the link or button.</p>
+<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>
+<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>Example 1.1</h4>
<div class="example">
<p>In this example, a user is asked to pick her preferred color
@@ -469,13 +465,13 @@
<li><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links want to be Links</a></li>
</ul>
<h3 id="graphical-representations"><span class="secno">2. </span>Graphical representations: charts, diagrams, graphs, maps, illustrations</h3>
-<p>The full text alternative MAY be provided in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute, or a shorter text alternative MAY be provided in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></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>The full text alternative MAY be provided in the <code>alt</code> attribute, or a shorter text alternative MAY 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>
<h4>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 title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute describes the process shown in the flowchart:</p>
+ <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>
<p><strong>Example Image:</strong></p>
<img src="images/flowchart.gif" width="221" height="299" alt="flowchart" id="flowchart">
<p>
@@ -520,7 +516,7 @@
</div>
<h4>Example 2.3</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 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="#flowchart">flowchart</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/states_and_properties#aria-describedby">aria-describedby</a> attribute:</p>
<p><strong>Example Code:</strong><br>
</p>
<pre>
@@ -568,9 +564,7 @@
<li><a href="http://www.webaim.org/techniques/images/longdesc.php">Creating Accessible Images: Long Descriptions</a> (WebAIM tutorial)</li>
</ul>
<h3 id="img-of-text"><span class="secno">3. </span>Images of text</h3>
-<p>Sometimes, an image only contains text, and the purpose of the
- image is to display text using visual effects and /or fonts. While it is <em>strongly</em> recommended that text styled using CSS be used, but if this is not possible, in most of these cases, the content of the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute SHOULD consist of the same text as
- written in the image itself. </p>
+<p>Sometimes, an image only contains text, and the purpose of the image is to display text using visual effects and /or fonts. While it is <em>strongly</em> recommended that text styled using CSS be used, but if this is not possible, in most of these cases, the content of the <code title="attr-img-alt">alt</code> attribute SHOULD consist of the same text as written in the image itself. </p>
<h4>Example 3.1</h4>
<div class="example">
<!-- <p>Consider this <a href="images/text.gif">image</a> containing the text "Get Happy!" it uses a non standard font and uses multiple colors. The text is
@@ -619,7 +613,7 @@
<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" width="500" height="300" alt="Figure 1. Distribution of Articles by Journal Category.
-Pie chart: Language=68%, Education=14% and Science=18%."></p>
+Pie chart: Language=68%, Education=14% and Science=18%." id="piechart"></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>
@@ -670,14 +664,14 @@
<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> (WCAG technique)</li>
<li><A href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/C9.html">Using CSS to include decorative images (CSS)</A> (WCAG technique)</li>
- <LI><A href="F38.html">Omitting the alt-attribute for non-text content used for decorative purposes only in HTML</A> (WCAG failure example).</LI>
- <LI><A href="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> (WCAG failure example).</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> (WCAG failure example).</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> (WCAG failure example).</LI>
</ul>
<h3 id="images-enhance">6. Images that enhance the themes or subject matter of the page content</h3>
<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><a href="#the-img-element">img</a></code> element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so
+ 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 MUST be present but its
value MAY be null. In cases where the image is closely related to the subject matter of the page content, the text alternative MUST 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>Example 6.1</h4>
@@ -792,8 +786,8 @@
<li><a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a></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="H30.html">Providing link text that describes the purpose of a link for anchor elements</A> (WCAG technique)</li>
- <li><A href="G82.html">Providing a text alternative that identifies the purpose of the non-text content</A> (WCAG technique)</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> (WCAG technique)</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> (WCAG technique)</li>
</ul>
<h3 id="img-not-for-user"><span class="secno">7. </span>An image not intended for the user</h3>
<p>Generally authors should avoid using <code>img</code> elements
@@ -1048,10 +1042,10 @@
</pre>
</div>
<p> </p>
-<h3>12. When a text alternative is unknown at the time of publication</h3>
-<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 SHOULD be provided using either the <code>figcaption</code> element. 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 alt 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>
+<h3 id="unknown">12. When a text alternative is unknown at the time of publication</h3>
+<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 SHOULD be provided using either the <code>figcaption</code> element. 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>
<H3 id="captcha">13. CAPTCHA Images </H3>
-<p><A title="http://www.w3.org/TR/WCAG20/#CAPTCHAdef" href="http://www.w3.org/TR/WCAG20/#CAPTCHAdef">CAPTCHA</A> stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". CAPTCHA images are used for security purposes to confirm that <A title="http://www.w3.org/TR/WCAG20/#contentdef" href="http://www.w3.org/TR/WCAG20/#contentdef">content</A> is being accessed by a person rather than a computer. This authentication is done through visual verification of an image. CAPTCHA typically presents an image with characters or words in it that the user is to re-type. The image is usually distorted and has some noise applied to it to make the characters difficult to read. </p>
+<p><A title="http://www.w3.org/TR/WCAG20/#atdef" href="http://www.w3.org/TR/WCAG20/#CAPTCHAdef">CAPTCHA</A> stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". CAPTCHA images are used for security purposes to confirm that <A title="http://www.w3.org/TR/WCAG20/#contentdef" href="http://www.w3.org/TR/WCAG20/#contentdef">content</A> is being accessed by a person rather than a computer. This authentication is done through visual verification of an image. CAPTCHA typically presents an image with characters or words in it that the user is to re-type. The image is usually distorted and has some noise applied to it to make the characters difficult to read. </p>
<p>Provide <A title="http://www.w3.org/TR/WCAG20/#text-altdef" href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</A> that identify and describe the purpose of the <A title="http://www.w3.org/TR/WCAG20/#non-text-contentdef" href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</A>, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception. For instance provide an audio alternative along with the visual image. Locate the audio option right next to the visual one. This helps but is still problematic for people without sound cards, the deaf-blind, and some low hearing people. Another method is to include a form that asks a question along with the visual image. This helps but is can be problematic for people with cognitive impairments. </p>
<p><span class="warning">Warning: It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. Further information is available in the W3C's <a href="http://www.w3.org/TR/turingtest/">Inaccessibility of CAPTCHA</a>.</span></p>
<H4>Example 13.1</H4>
@@ -1077,7 +1071,7 @@
<h3>alt text </h3>
<p>Colloquial term for a text alternative provided using the <code>alt</code> attribute of an <code>img</code> element.</p>
<h3>assistive technology</h3>
-<p>Hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents. A more <a href="http://www.w3.org/TR/WCAG/#atdef">detailed explanation of assistive technology</a> is provided in the WCAG 2.0 glossary.</p>
+<p>Hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents. A more <a href="http://www.w3.org/TR/WCAG20/#atdef">detailed explanation of assistive technology</a> is provided in the WCAG 2.0 glossary.</p>
<h3>content (Web content)
</h3>
@@ -1092,4 +1086,5 @@
<pre class="example"><img src="null.gif" <strong>alt=""</strong>></pre>
<h3>Text alternative</h3>
-<p>A programmatically determined <A title="definition: text" href="appendixA.html#textdef">text</A> that is used in place of <A title="definition: non-text content" href="appendixA.html#non-text-contentdef">non-text content</A>, or text that is used in addition to non-text content and referred to from the <A title="definition: programmatically determined" href="appendixA.html#programmaticallydetermineddef">programmatically determined</A> text</p>
+<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>
+
Received on Tuesday, 11 May 2010 10:18:07 UTC