- From: poot <cvsmail@w3.org>
- Date: Wed, 7 Apr 2010 21:44:12 +0900 (JST)
- To: public-html-diffs@w3.org
: latest update
http://dev.w3.org/cvsweb/html5/alt-techniques/Overview.html?r1=1.5&r2=1.6&f=h
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -d -r1.5 -r1.6
--- Overview.html 7 Apr 2010 12:40:13 -0000 1.5
+++ Overview.html 7 Apr 2010 12:44:02 -0000 1.6
@@ -122,7 +122,7 @@
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
- position: relative;
+
z-index: 1;
}
.element:before {
@@ -220,17 +220,31 @@
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css">
-</head>
+ <style type="text/css">
+<!--
+.element1 { background: #EEEEFF;
+ color: black;
+ margin: 0 0 1em 0.15em;
+ padding: 0 1em 0.25em 0.75em;
+ border-left: solid #9999FF 0.25em;
+
+ z-index: 1;
+}
+.element1 {width:400px;}
+.warning2 {color: red; background: transparent; }
+-->
+ </style>
+ </head>
<body>
-<h1>HTML6: Techniques for providing useful text alternatives</h1>
-<h2>Editor's Draft 4th March 2010</h2>
+<h1>HTML5: Techniques for providing useful text alternatives</h1>
+<h2>Editor's Draft 1st April 2010</h2>
<h3>Editor:</h3>
<p><a href="mailto:sfaulkner@paciellogroup.com">Steve Faulkner</a>, The Paciello Group.</p>
<hr>
<H2>Abstract</H2>
<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>
<H3>Status of This document</H3>
-<p>This document is for review by the HTML and Protocols, Formats working groups and other interested people. It is subject to change without notice. This document has no formal standing within W3C. The basis of the current content is from sections <A title="4.8.2.1.1" href="http://dev.w3.org/html5/spec/text-level-semantics.html#a-link-or-button-containing-nothing-but-the-image">4.8.2.1.1</A> to <A title="4.8.2.1.11" href="http://dev.w3.org/html5/spec/text-level-semantics.html#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images">4.8.2.1.11</A> of the HTML5 specification and the <A href="http://www.paciellogroup.com/blog/misc/uc/">text produced</A> for <A href="http://www.w3.org/html/wg/tracker/actions/54">Action 54</A> in the HTML issue tracker.</p>
+<p>This document is for review by the HTML and Protocols & Formats working groups and other interested people. It is subject to change without notice. This document has no formal standing within W3C. The basis of the current content is from sections <A title="4.8.2.1.1" href="http://dev.w3.org/html5/spec/text-level-semantics.html#a-link-or-button-containing-nothing-but-the-image">4.8.2.1.1</A> to <A title="4.8.2.1.11" href="http://dev.w3.org/html5/spec/text-level-semantics.html#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images">4.8.2.1.11</A> of the HTML5 specification and the <A href="http://www.paciellogroup.com/blog/misc/uc/">text produced</A> for <A href="http://www.w3.org/html/wg/tracker/actions/54">Action 54</A> in the HTML issue tracker.</p>
<h2>Table of Contents</h2>
<ul>
<li><a href="#intro">Introduction</a>
@@ -241,6 +255,17 @@
<li><a href="#conformance">Conformance Requirements</a></li>
</ul>
</li>
+ <li><a href="#methods">Methods for Providing Text Alternatives</a>
+ <ul>
+ <li><a href="#altmethod">The img element alt attribute</a></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>
<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>
@@ -280,11 +305,43 @@
<LI>Where an image performs a specific function, such as a graphical link, provide information about its <A href="http://www.w3.org/TR/WCAG20/#functiondef">functionality</A>.
<LI>Be succinct as possible while still conveying equivalent values. Short text that describes its purpose or gives an overview will often suffice.
<LI>Write suitable alt text according to context. The same image in a different situation may need very different alt text.
- <LI>Avoid redundant alt text. An example of this would be repeating the same text in your document, as well as in the alt attribute, and is unnecessary. ]</LI>
+ <LI>Avoid redundant alt text. An example of this would be repeating the same text in your document, as well as in the alt attribute, and is unnecessary. </LI>
</UL>
<h3 id="conformance">Conformance Requirements</h3>
<p>All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.</p>
<p>The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in <a href="http://www.apps.ietf.org/rfc/rfc2119.html">RFC2119</a>.</p>
+<hr>
+<h2 id="methods">Methods for Providing Text Alternatives</h2>
+<h3 id="altmethod">The <code>img</code> element <code>alt</code> attribute</h3>
+<p>The primary method for providing text alternatives for images is by including text in the <code>img</code> element <code>alt</code> attribute. In graphical browsers the content of the alt attribute is typically displayed along with an indication (bordered area and/or an image icon) of the presence of an image when the image is not displayed, because the user has disabled image display or the image source information is incorrect. Assistive technologies such as screen readers will typically announce the presence of an image followed by the alt attribute content. Text based browsers may display the alt attribute content in brackets or in different colored text or as the content of a link to the image or as text without any indication of the image a prefixed with an indication of the image.</p>
+<p><strong>Example:</strong></p>
+<pre><img src="example.jpg" <strong>alt="Alternative text."</strong>></pre>
+<h5>Advantages:</h5>
+<ul>
+ <li>Robust support in most graphical & non graphical web browsers and assistive technologies.</li>
+ <li>Text alternative is explicitly associated with the image.</li>
+ <li>Inclusion of text alternatives as alt attribute content does not impact upon the default visual display of content.</li>
+</ul>
+<h5>Disadvantages:</h5>
+<ul>
+ <li>Content of the alt attribute is not available to some users who may find it useful.</li>
+ <li>If the alt attribute content is too long it may cause display issues in some browsers.</li>
+ <li>Semantic structure cannot be added to alt attribute content.</li>
+</ul>
+<p> </p>
+<h3>The <code>figure</code> and <code>figcaption</code> elements</h3>
+<p><span class="note">to do</span></p>
+<h3>The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes</h3>
+<p><span class="note">to do</span></p>
+<h3>Text content within the same document or another document</h3>
+<p><span class="note">to do</span></p>
+<h3>Text content next to or prior to an image </h3>
+<p><span class="note">to do</span></p>
+<h3>The <code>img</code> element <code>title</code> attribute</h3>
+<p><span class="note">to do</span></p>
+<h3>The <code>img</code> element <code>longdesc</code> attribute</h3>
+<p><span class="note">to do</span></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>
@@ -350,17 +407,6 @@
<p><img src="flowchart.gif" <strong>alt="If the lamp doesn't work; check if it's plugged in.
If not, plug it in. If it's plugged in and still doesn't work; check if the bulb is burned out.
If it is, replace the bulb. If it still does not work; buy a new lamp."</strong>></p></pre>
- <h5>Advantages:</h5>
- <ul>
- <li>Robust support in most user agents and assistive technologies.</li>
- <li>Text alternative is explicitly associated with the image.</li>
- </ul>
- <h5>Disadvantages:</h5>
- <ul>
- <li>Content of the alt attribute is not available to some users who may find it useful.</li>
- <li>The length of the alt attribute content may cause display issues in some browsers.</li>
- </ul>
- <p> </p>
</div>
<h4>Example 2.2</h4>
<div class="example">
@@ -459,8 +505,9 @@
<p><strong>Example Image:</strong></p>
<p> <img src="images/text.gif" alt="Get Happy!" width="275" height="77"> </p>
<p><strong>Example code:</strong></p>
-<pre><h1><img src="gethappy.gif" <strong>alt="Get Happy!"</strong>></h1>
-</pre></div>
+<pre><h1><img src="gethappy.gif" <strong>alt="Get Happy!"</strong>></h1></pre>
+<p> </p>
+</div>
<h4>Example 3.2</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
@@ -468,11 +515,19 @@
users, then the correct alternative text is just the same text
"Get Happy!", and no mention need be made of the text style:
-->
- <p>In this example we have an advertising image consisting of text, the phrase "The BIG sale" is repeated 3 times, each time the text gets smaller and fainter, the last line reads "...ends friday" In this case it is recommended that the image's text alternative only include the text "The BIG sale" once as the repeptition is for visual effect and the repetition of the text for users who cannot view the image is unecessary and may be confusing.</p>
+ <p>In this example we have an advertising image consisting of text, the phrase "The BIG sale" is repeated 3 times, each time the text gets smaller and fainter, the last line reads "...ends friday" In this case it is recommended that the image's text alternative only include the text "The BIG sale" once as the repetition is for visual effect and the repetition of the text for users who cannot view the image is unnecessary and may be confusing.</p>
<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>Advantages:</h5>
+ <ul>
+ <li>Text alternative is explicitly associated with the image.</li>
+ </ul>
+ <h5>Disadvantages:</h5>
+ <ul>
+ <li>When text is represented in an image the text cannot be restyled to suit users needs.</li>
+ </ul>
</div>
<h4>Related techniques and resources</h4>
<ul>
@@ -493,12 +548,12 @@
<h5>Advantages:</h5>
<ul>
- <li>Robust support in most user agents and assistive technologies.</li>
+ <li>Robust support in most browsers and assistive technologies.</li>
<li>Text alternative is explicitly associated with the image.</li>
</ul>
<h5>Disadvantages:</h5>
<ul>
- <li>?</li>
+ <li>The text alternative may be useful to all users.</li>
</ul>
</div>
<h4>Example 4.2</h4>
@@ -510,6 +565,17 @@
<p <strong>id="d2"</strong>>Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%.</p></pre>
+ <h5>Advantages:</h5>
+ <ul>
+ <li>Short and long text alternatives are explicitly associated with the image.</li>
+ <li>Long text alternative is available to all users.</li>
+ </ul>
+ <h5>Disadvantages:</h5>
+ <ul>
+ <li>Long text alternative takes up visual display space.</li>
+ <li>The explicit association using aria-describedby is not supported by some user agents and assistive technology.</li>
+ <li>Users of assistive technology that support aria-describedby may have the long text alternative announced more than once</li>
+ </ul>
</div>
<h4>Related techniques and resources</h4>
<p><span class="note">to do</span></p>
@@ -518,7 +584,7 @@
<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>
<h4>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 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><strong>Example image in context:</strong></p>
<div class="element">
<p><img src="images/border.gif" alt="" width="400" height="30"></p>
@@ -551,9 +617,8 @@
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>
<p><strong>Example Image </strong></p>
- <p><img src="images/shalott.jpg" width="400" height="305" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott"> </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>
- <p><span class="note">Note: The image is contained within a <code>figure</code> element to indicate that it is not purely decorative and is part of the page content.</span></p>
<pre>
<hgroup><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
@@ -570,16 +635,25 @@
<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><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="271" height="171" alt="Information about this painting inspired by the poem." title="Information about this painting inspired by the poem."></a></p>
+ <p><em>Full recitation of Alfred, Lord Tennyson's poem.</em></p>
+ </div>
<p><strong>Example code: </strong></p>
- <p><span class="note">Note: The image is contained within a <code>figure</code> element to indicate that it is not purely decorative and is part of the page content.</span></p>
- <pre><h1>The Lady of Shalott</h1>
-<h2>A poem by Alfred Lord Tennyson</h2>
-<figure><a href="http://bit.ly/5HJvVZ" title="A painting inspired by the poem">
-<img src="shalott.jpeg" <strong>alt="A painting inspired by the poem."</strong>><a/></figure>
+ <pre><hgroup><h1>The Lady of Shalott</h1>
+<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
+<figure><a href="http://bit.ly/5HJvVZ" title="Information about this painting inspired by the poem.">
+<img src="shalott.jpeg" <strong>alt="Information about this painting inspired by the poem."</strong>></a></figure>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
+ <p> </p>
+
</div>
- <!-- <h4>Example 6.3</h4>
+ <h4>
+ <!-- <h4>Example 6.3</h4>
<div class="example">
<p>In this example of the same image a visible text caption is provided using the <figure> and <figcaption> elements.</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>
@@ -596,10 +670,27 @@
</figure>
</pre>
</div> -->
-<h4>Example 6.3</h4>
+ Example 6.3</h4>
+ <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>
+ </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>
+<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
+ </div>
+<h4>Example 6.4</h4>
<div class="example">
- <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image. So both options are considered to be conforming HTML5.</p>
- <p><strong>Example Image in context: </strong></p>
+ <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming HTML5.</p>
+ <p><strong>Example 1 Image in context: </strong></p>
<div class="element"><p><b>Medieval Nights</b></p>
<p><img src="images/shalott.jpg" width="188" height="129" alt=""></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar, on the riverside, Kingston upon Thames.</p></div>
@@ -612,14 +703,19 @@
Boaters Bar,on the riverside, Kingston upon Thames.</p>
</pre>
+ <p><strong>Example 2 Image in context: </strong></p>
+ <div class="element1">
+ <p><b>Medieval Night</b></p>
+ <p><img src="images/shalott.jpg" width="188" height="129" alt=""></p>
+ <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>
+ </div>
<p><strong>Example code 2: </strong></p>
- <p><span class="note">Note: The image is contained within a <code>figure</code> element to indicate that it is not purely decorative and is part of the page content.</span></p>
<pre>
<h1>Medieval Nights</h1>
<figure><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></figure>
-<p>Join us for our medieval theme nights every Friday at
-Boaters Bar,on the riverside, Kingston upon Thames.</p></pre>
+<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>
</div>
<h4>Related techniques and resources</h4>
@@ -653,7 +749,7 @@
<h3 id="icons"><span class="secno"> </span>8. Icons and logos</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 MUST provided. </p>
-<p>In other cases the icon adds emphasis to text content that needs to be convyed textually, In such cases a text alternative MUST be 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 MUST be provided.</p>
<h4>Example 8.1</h4>
<div class="example">
<p>In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text "home". The image has an empty alt text. Where images are used in this way, it is also be appropriate to add the image using CSS. </p>
@@ -680,7 +776,7 @@
</div>
<h4>Example 8.2</h4>
<div class="example">
- <p>In this example, we have a warning message, with a warning icon. The icon emphasises the importance of the message and identifies it as a particular type of content. Where images are used in this way, it is not appropriate to add the image using CSS. </p>
+ <p>In this example, we have a warning message, with a warning icon. The icon emphasizes the importance of the message and identifies it as a particular type of content. Where images are used in this way, it is not appropriate to add the image using CSS. </p>
<p><strong>Example Image in context: </strong></p>
<div class="element">
<p><img src="images/warning.gif" alt="Warning!" width="38" height="30"> <strong>Your session is about to expire.</strong></p>
@@ -749,10 +845,10 @@
<H3 id="captcha">12. 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>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 12.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>
-
-
+<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>
+<p class="warning"> </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>
@@ -767,11 +863,23 @@
<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>13. Webcam images</h3>
<p> </p>
<hr>
<h2 id="glossary">Glossary</h2>
<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>
+<h3>content (Web content)
+
+</h3>
+<p>Information and sensory experience to be communicated to the user by means of a user agent such as a web browser, including code or markup that defines the content's structure, presentation, and interactions. </p>
+
+ <h3>non-text content </h3>
+ <p>Any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language </p>
+ <p>Note: This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text. </p>
+
<h3>Empty alt attribute or null alt attribute.</h3>
<p>An alt attribute with no content:</p>
<pre class="example"><img src="null.gif" <strong>alt=""</strong>></pre>
Received on Wednesday, 7 April 2010 12:44:51 UTC