- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 08 Jun 2010 14:56:07 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv15090
Modified Files:
Overview.html
Log Message:
updated for fpwd
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.27
retrieving revision 1.28
diff -u -d -r1.27 -r1.28
--- Overview.html 19 May 2010 15:08:38 -0000 1.27
+++ Overview.html 8 Jun 2010 14:56:05 -0000 1.28
@@ -1,5 +1,6 @@
-<!DOCTYPE HTML>
-<html lang="en-US"><head><title>HTML5: Techniques for the provision of text alternatives</title><style type="text/css">
+<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
+<html lang="en" dir="ltr">
+<head><title>HTML5: Techniques for the provision of text alternatives</title><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
@@ -219,7 +220,7 @@
.warning1 {font-weight: bolder; font-style: italic; }
</style>
- <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css">
+ <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD">
<style type="text/css">
<!--
.element1 { background: #EEEEFF;
@@ -236,17 +237,45 @@
</style>
</head>
<body>
-<h1>HTML5: Techniques for providing useful text alternatives</h1>
-<h2>Editor's Draft 19th May 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. <span class="warning">It is subject to change without notice. This document currently has no formal standing within W3C.</span> 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>If you wish to make comments regarding this document, please send them to <a href="mailto:public-html-comments@w3.org">public-html-comments@w3.org</a> (<a href="mailto:public-html-comments-request@w3.org?subject=subscribe">subscribe</A>, <a href="http://lists.w3.org/Archives/Public/public-html-comments/">archives</a>)
+<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"><acronym title="World Wide Web Consortium">W3C</acronym> Working Draft, 9th June 2010</h2>
+<dl><dt>This version:</dt><dd> </dd><dt>Latest published version:</dt><dd> </dd><dt>Latest editor's draft:</dt><dd> </dd><dt>Previous version:</dt><dd> </dd>
+<dt>Editor: </dt>
+<dd><a href="mailto:sfaulkner@paciellogroup.com">Steve Faulkner</a>, <a href="http://www.paciellogroup.com">The Paciello Group</a>.</dd></dl>
+<p> </p>
+<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2009-2010 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium"><acronym title="World Wide Web Consortium">W3C</acronym></acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology"><acronym title="Massachusetts Institute of Technology">MIT</acronym></acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. <acronym title="World Wide Web Consortium">W3C</acronym> <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-documets">document use</a> rules apply.</p><hr></div>
+ <div id="abstract" class="introductory section"><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>
+<div id="sotd" class="introductory section">
+ <h2>Status of This Document</h2><p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <acronym title="World Wide Web Consortium">W3C</acronym> publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/"><acronym title="World Wide Web Consortium">W3C</acronym> technical reports index</a> at <a href="http://www.w3.org/TR/">http://www.w3.org/TR/</a>.</em></p>
+<!-- <p>This document has been reviewed by W3C Members, by software
+developers, and by other W3C groups and interested parties, and is
+endorsed by the Director as a W3C Recommendation. It is a stable
+document and may be used as reference material or cited from another
+document. W3C's role in making the Recommendation is to draw attention
+to the specification and to promote its widespread deployment. This
+enhances the functionality and interoperability of the Web.</p> -->
+<p>The latest stable version of the editor's draft of this specification is
+always available on <a href="http://dev.w3.org/html5/alt-techniques/">the <acronym title="World Wide Web Consortium">W3C</acronym> CVS
+server</a>.
+<!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING LIST TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- status of document, group responsible (required) -->
+
+</p>
+<p>This specification has been developed by the <a href="http://www.w3.org/html/wg/">HTML Working Group</a> and is
+currently being published by the <a href="http://www.w3.org/html/wg/">HTML
+Working Group</a>.</p>
+<!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- context and rationale (required) -->
+
+<p>This specification is an extension to the HTML5 language. All normative
+content in the HTML5 specification, unless specifically overridden by this
+specification, is intended to be the basis for this specification.</p>
+
+<p>This document was published by the <a href="http://www.w3.org/html/wg">HTML Working Group</a> as a Working Draft. This document is intended to become a <acronym title="World Wide Web Consortium">W3C</acronym> Recommendation. If you wish to make comments regarding this document, please send them to <a href="mailto:public-html-comments@w3.org">public-html-comments@w3.org</a> (<a href="mailto:public-html-comments-request@w3.org?subject=subscribe">subscribe</A>, <a href="http://lists.w3.org/Archives/Public/public-html-comments/">archives</a>)
or submit them using <a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG&component=alt%20techniques%20(editor:%20Steven%20Faulkner)">the W3C public bug database</a>. All feedback is welcome.</p>
+<p>Publication as a Working Draft does not imply endorsement by the <acronym title="World Wide Web Consortium">W3C</acronym> Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p><p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 <acronym title="World Wide Web Consortium">W3C</acronym> Patent Policy</a>. <acronym title="World Wide Web Consortium">W3C</acronym> maintains a <a href="http://www.w3.org/2004/01/pp-impl/40318/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> ust disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the <acronym title="World Wide Web Consortium">W3C</acronym> Patent Policy</a>.</p></div>
+
+<div id="toc">
<h2>Table of Contents</h2>
<ul>
<li><a href="#intro">Introduction</a>
@@ -292,6 +321,7 @@
</li>
<li><a href="#glossary">Glossary</a></li>
</ul>
+</div>
<h2 id="intro">Introduction</h2>
<H3 id="text-alt">Text Alternatives</H3>
<p><A href="http://www.w3.org/TR/WCAG20/#text-altdef">Text alternatives</A> are a primary way of making visual information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.</p>
@@ -321,7 +351,7 @@
<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 or prefixed with an indication of the image.</p>
+<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 or 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>
@@ -349,7 +379,8 @@
<p>Circumstances in which <strong>it is not</strong> appropriate to use an empty or null <code>alt</code> attribute:</p>
<ul>
<li>An image is contained within a <code>figure</code> element and has an associated caption provided using the <code>figcaption</code> element.</li>
- <li>An image is not purely decorative and contains information...</li>
+ <li>An image contains relevant information not available in the same document as text.</li>
+ <li>An image contains relevant information, an interpretation of which is available in the same document as structured text.</li>
<li class="note">to do</li>
</ul>
<h6>How long should a short text alternative be?</h6>
@@ -447,14 +478,14 @@
from a list of three. Each color is given by an image, but for
users who cannot view the images,
the color names are included within the alt attributes of the images:</p>
- <p><strong>Example Rendering:</strong></p>
+ <p><strong>Example Rendering:</strong></p>
<p><img src="images/buttons.gif" width="274" height="45" alt="The example HTML code as displayed in a browser. 3 links each containing a rectangular image: 1 is blue with the text 'blue', 2 red with the text 'red' and 3 is green with the text 'green'."></p>
<p><strong>Example code:</strong></p>
<pre>
<ul>
<li><a href="red.html"><img src="red.jpeg" <strong>alt="Red"</strong>></a></li>
<li><a href="green.html"><img src="green.jpeg" <strong>alt="Green"</strong>></a></li>
-<li><a href="blue.html"><img src="blue.jpeg" <strong>alt="Blue"</strong>></a></li></ul></pre>
+<li><a href="blue.html"><img src="blue.jpeg" <strong>alt="Blue"</strong>></a></li></ul></pre>
</div>
<h4>Example 1.2</h4>
<div class="example">
@@ -489,9 +520,8 @@
<div class="example">
<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>
- <strong>Example Code:</strong><br>
+ <img src="images/flowchart.gif" width="221" height="299" alt="flowchart" id="flowchart">
+ <p> <strong>Example Code:</strong><br>
</p>
<pre>
<p>A flowchart representing a process for dealing with a non-functioning lamp:</p>
@@ -503,7 +533,7 @@
<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, 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 a description, within the same document, of the process represented in the flowchart. 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 Code:</strong><br>
-</p>
+ </p>
<pre>
<p><strong><a href="#d1" title="Flowchart description."></strong><img src="flowchart.gif" <strong>alt="Broken lamp flowchart description."</strong>><strong></a></strong></p>
...
@@ -520,7 +550,7 @@
<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/states_and_properties#aria-describedby">aria-describedby</a> attribute:</p>
<p><strong>Example Code:</strong><br>
-</p>
+ </p>
<pre>
<p><img src="flowchart.gif" <strong>alt="A flowchart representing a process for dealing with a non-functioning lamp."</strong>
<strong>aria-describedby="d1"</strong>></p>
@@ -530,35 +560,34 @@
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.</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>
+ <h5> </h5>
</div>
-<!-- <h4>Example 2.4</h4>
+<h4>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 as a programmatically associated label, using the <a href="http://www.w3.org/TR/wai-aria/#aria-labelledby">aria-labelledby</a> attribute, in text below the image 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. <strong>Note:</strong> The 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" width="221" height="299" alt="A flowchart process for dealing with a non-functioning lamp." id="flowchart" aria-describedby="d1"></p>
+ <div id="d1"> <strong>If the lamp doesn't work:</strong>
+ <ol>
+ <li>Check if it's plugged in, if not, plug it in.</li>
+ <li>If it still doesn't work; check if the bulb is burned out.
+ If it is, replace the bulb.</li>
+ <li>If it still doesn't work; buy a new lamp.</li>
+ </ol>
+ </div>
+ </div>
<p><strong>Example Code:</strong><br>
</p>
<pre>
-<p><img src="flowchart.gif"<strong></strong> <strong>aria-describedby="d1"</strong> <strong>aria-labelledby="l1"</strong>></p>
+<p><img src="flowchart.gif" <strong>alt="A flowchart process for dealing with a non-functioning lamp."</strong>
+<strong>aria-describedby="d1"</strong>></p>
-<p <strong>id="l1"</strong>>A flowchart representing a process for dealing with a non-functioning lamp.</p>
-...
-<p <strong>id="d1"</strong>>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.</p></pre>
-</div> -->
+<div <strong>id="d1"</strong>>
+<strong>If the lamp doesn't work:</strong><br><strong><ol></strong><br> <strong><li></strong>Check if it's plugged in, if not, plug it in.<strong></li></strong><br> <strong><li></strong>If it still doesn't work; check if the bulb is burned out.<br> If it is, replace the bulb.<strong></li></strong><br> <strong><li></strong>If it still doesn't work; buy a new lamp.<strong></li></strong><br><strong></ol></strong>
+</div> </pre>
+</div>
<h4>Related techniques and resources</h4>
<ul>
<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> (WCAG 2.0 Technique)</li>
@@ -569,45 +598,45 @@
<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
+ <!-- <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
merely being used as a heading, to spice up the page for graphical
users, then the correct alternative text is just the same text
"Get Happy!", and no mention need be made of the text style:
</p>-->
-<p>This example shows an image of the text "Get Happy!"
- written in a fancy multi colored freehand style.
- The image makes up the content of a heading. In this case the text alternative for the image should be "Get Happy!".</p>
+ <p>This example shows an image of the text "Get Happy!"
+ written in a fancy multi colored freehand style.
+ The image makes up the content of a heading. In this case the text alternative for the image should be "Get Happy!".</p>
<p><strong>Example Image:</strong></p>
- <p> <img src="images/text.gif" alt="Get Happy!" width="275" height="77"> </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>
-<p> </p>
+ <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
+<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
merely being used as a heading, to spice up the page for graphical
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 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>
+ <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><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html">Images of text</a> explanation from WCAG 2.0 of why it is better to use text rather than images of text</li>
+ <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>
+ <li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html">Images of text</a> explanation from WCAG 2.0 of why it is better to use text rather than images of text</li>
+</ul>
<h3 id="images-include-text">4. Images that include text</h3>
<p>Sometimes, an image consists of a graphics such as a chart and associated text. In this case it is recommended that the text in the image is included in text alternative. </p>
<h4>Example 4.1</h4>
@@ -628,7 +657,6 @@
<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> </h5>
</div>
<h4>Related techniques and resources</h4>
@@ -640,10 +668,11 @@
<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><strong>Example image in context:</strong></p>
- <div class="element">
+ <div class="element1">
<p><img src="images/border.gif" alt="" width="400" height="30"></p>
- <p><strong>Clara's Blog</strong></p>
- <p>Welcome to my blog...</p></div>
+ <p><strong>Clara's Blog</strong></p>
+ <p>Welcome to my blog...</p>
+ </div>
<p> </p>
<p><strong>Example code:</strong></p>
<pre><p><img src="border.gif" <strong>alt=""</strong> width="400" height="30"></p>
@@ -658,7 +687,6 @@
<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
@@ -671,8 +699,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="338" height="234" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott"> </p>
- <p><strong>Example code: </strong></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>
<pre>
<hgroup><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
@@ -683,31 +711,29 @@
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
-
-</div>
+</div>
<h4>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, 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>
- <pre><hgroup><h1>The Lady of Shalott</h1>
+<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>
+ <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>
-
+ <p> </p>
</div>
- <h4>
- <!-- <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>
@@ -724,30 +750,32 @@
</figure>
</pre>
</div> -->
- 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>
+ 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>
+</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 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>
+ <div class="element1">
+ <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>
<p><strong>Example code 1: </strong></p>
<pre>
<h1>Medieval Nights</h1>
@@ -756,7 +784,6 @@
<p>Join us for our medieval theme nights every Friday at
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>
@@ -771,7 +798,6 @@
<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>
<ul>
<li><a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a></li>
@@ -785,7 +811,7 @@
for purposes other than showing images.</p>
<p>If an <code>img</code> element is being used for purposes other
than showing an image, e.g. as part of a service to count page
- views, then an empty <code title="attr-img-alt">alt</code> attribute MUST be included. In such cases, the <code title="attr-dim-width">width</code> and <code title="attr-dim-height">height</code> attributes should both
+ views, then an empty <code title="attr-img-alt">alt</code> attribute MUST be included. In such cases, the <code title="attr-dim-width">width</code> and <code title="attr-dim-height">height</code> attributes should both
be set to zero.</p>
<h4>Example 7.1</h4>
<div class="example">
@@ -800,9 +826,9 @@
<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>
</ul>
-<h3 id="icons">8. Icons and logos</h3>
+<h3 id="icons">8. 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 MUST 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="#attr-img-alt">alt</A> attribute MUST 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">
@@ -817,7 +843,7 @@
</pre>
<p><strong>Example code 2 - CSS image:</strong></p>
- <pre>
+ <pre>
#home:before
{
content: url(home.png);
@@ -825,14 +851,12 @@
<a href="home.html" id="home">Home</a></pre>
-
-
-</div>
+</div>
<h4>Example 8.2</h4>
<div class="example">
<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">
+ <div class="element1">
<p><img src="images/warning.gif" alt="Warning!" width="38" height="30"> <strong>Your session is about to expire.</strong></p>
</div>
<p><strong>Example code:</strong></p>
@@ -857,7 +881,7 @@
</pre>
</div>
-<p> </p>
+<p> </p>
<h4>Related techniques and resources</h4>
<p><span class="note">to do</span></p>
<h3 id="pictures">9. Images of Pictures</h3>
@@ -867,7 +891,7 @@
<p>This example shows an image uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath. The image has a text alternative provided using the <code>img</code> elements <code>alt</code> attribute. It also has an caption provided by including the <code>img</code> element in a <code>figure</code> element and using a <code>figcaption</code> element to identify the caption text. The text alternative in Example code 2 includes information "photo" about the type of image, although this is not generally recommended, authors MAY include such information in the <code>alt</code> attribute content.</p>
<div class="example">
<p><strong>Example image in context:</strong></p>
- <div class="element">
+ <div class="element1">
<p><img src="images/lola.jpg" alt="Lola the cat sitting under an umbrella in the bath tub." width="300" height="242"></p>
<p>Lola prefers a bath to a shower.</p>
</div>
@@ -889,7 +913,7 @@
<p>Context: An image on a page explaining in general terms Rorschach inkblot personality tests. The image is an abstract freeform which is subjective to individual interpretation.</p>
<div class="example">
<p><strong>Image example in context:</strong></p>
- <div class="element">
+ <div class="element1">
<blockquote cite="http://en.wikipedia.org/wiki/Rorschach_test#History">Using interpretation of "ambiguous designs" to assess an individual's personality is an idea that goes back to Leonardo da Vinci and Botticelli. Interpretation of inkblots was central to a game from the late 19th century. Rorschach's, however, was the first systematic approach of this kind.</blockquote>
<p><img src="images/inkblot1.jpg" alt="An abstract, freeform inkblot." width="300" height="197"></p>
<p>The first of the ten cards in the Rorschach test.</p>
@@ -899,7 +923,6 @@
<img src="Rorschach1.jpg" <strong>alt="An abstract, freeform inkblot."</strong>>
<figcaption>The first of the ten cards in the Rorschach test.</figcaption>
</figure> </pre>
-
</div>
<h4>Related techniques and resources</h4>
<ul>
@@ -920,16 +943,15 @@
<div class="example">
<p><strong>Image example in context:</strong></p>
<div class="element1">
-
<p><img src="images/webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
In the foreground are the safety rails on the flat part of the roof. Nearby ther are low rise industrial buildings, beyond those are block of flats.
In the distance there's a church steeple." width="296" height="225"></p>
<p>View from the top of Sopwith house, looking towards North Kingston.</p>
<p>This image is updated every hour.</p>
- <p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
+ <p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
</div>
<p><strong>Code Example:</strong></p>
-<pre><figure>
+ <pre><figure>
<img src="webcam1.jpg" <strong>alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
beyond are blocks of flats. In the distance there's a church steeple."</strong> aria-describedby="s1">
@@ -943,8 +965,8 @@
<p>This example is the same as Example 10.1 except the descriptive part of the text alternative is not in the alt attribute, it is in a paragraph associated with the image using <code>aria-describedby</code>. </p>
<p><strong>Note: </strong>the <code>aria-describedby</code> attribute on the <code>img</code> element contains 2 <code>id</code> values. That of the image caption and the images longer text alternative. For browsers that support <code>aria-describedby</code> this will result in the text content of the referenced elements be joined together as the content of the images accessible description:</p>
<p>"View from the top of Sopwith house, looking towards north Kingston. In the foreground of the image are the safety rails on the flat part of the roof.
-Nearby there are low rise industrial buildings, beyond are blocks of flats.
-In the distance there's a church steeple."</p>
+ Nearby there are low rise industrial buildings, beyond are blocks of flats.
+ In the distance there's a church steeple."</p>
<p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith house, looking north.</p>
<div class="example">
<p><strong>Image example in context:</strong></p>
@@ -955,7 +977,7 @@
<p>View the <a href="http://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>
<p><strong>Sopwith House Weather cam image description:</strong></p>
<p>In the foreground are the safety rails on the flat part of the roof. Nearby there are low rise industrial buildings,
-beyond are blocks of flats. In the distance there's a church steeple.</p>
+ beyond are blocks of flats. In the distance there's a church steeple.</p>
</div>
<p><strong>Code Example:</strong></p>
<pre><figure>
@@ -1014,7 +1036,7 @@
<p> </p>
<h4>Related techniques and resources</h4>
<ul>
- <li> <a href="http://www.w3.org/WAI/PF/aria-practices/#DescribedBy"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices 1.0, 4.1.2 Describing</a></li>
+ <li> <a href="http://www.w3.org/WAI/PF/aria-practices/#DescribedBy"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> Authoring Practices 1.0, 4.1.2 Describing</a></li>
<LI><A href="http://dev.w3.org/html5/markup/figure.html#figure">The HTML5 figure element</A></LI>
<LI><A href="http://dev.w3.org/html5/markup/figcaption.html">The HTML5 figcaption element</A></LI>
</ul>
@@ -1036,7 +1058,7 @@
</div>
<h4>Example 11.2</h4>
<div class="example">
- <p>In this example, a picture representing a company logo for the <SPAN title="">PIP Corporation</SPAN> has been split into two pieces, the first containing the word "PIP" and the second with the abbreviated word "CO". The images are the sole content of a link to the PIPCO home page. In this case the text alternative MUST be a description of the link target. The alternative text ("PIP CO home") is all in the first image. </p>
+ <p>In this example, a picture representing a company logo for the <SPAN title="">PIP Corporation</SPAN> has been split into two pieces, the first containing the word "PIP" and the second with the abbreviated word "CO". The images are the sole content of a link to the PIPCO home page. In this case the text alternative MUST be a description of the link target. The alternative text ("PIP CO home") is all in the first image. </p>
<p><strong>Example Image:</strong></p>
<div class="element1">
<p><a href="#"><img src="images/pip.gif" alt="PIP CO" width="99" height="64" style="border:none"><img src="images/co.gif" alt="" style="border:none" width="103" height="64"></a></p>
@@ -1057,12 +1079,43 @@
<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>
-<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>
<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>
- <p><strong>Example code:</strong>
- </p>
+ <p><strong>Example code:</strong> </p>
+ <PRE><img src="captcha.png" <strong>alt="An audio challenge follows if you cannot view this image."</strong>>
+<!-- audio CAPTCHA option that allows the user to listen and type the word -->
+<!-- form that asks a question --></PRE>
+</div>
+<H4>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>
+<H3 id="captcha2">13. Logos</H3>
+<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>
+<p class="note"> </p>
+<H4>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>
+<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>
+ <p><strong>Example code:</strong> </p>
<PRE><img src="captcha.png" <strong>alt="An audio challenge follows if you cannot view this image."</strong>>
<!-- audio CAPTCHA option that allows the user to listen and type the word -->
<!-- form that asks a question --></PRE>
@@ -1079,19 +1132,13 @@
<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/WCAG20/#atdef">detailed explanation of assistive technology</a> is provided in the WCAG 2.0 glossary.</p>
-<h3>content (Web content)
-
-</h3>
+<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>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>
-
<h3>Text alternative</h3>
-<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>
-
+<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, 8 June 2010 14:56:10 UTC