- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 09 Jun 2010 15:04:17 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv2255
Modified Files:
Overview.html
Log Message:
added ids for all headings as per pub rules
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.34
retrieving revision 1.35
diff -u -d -r1.34 -r1.35
--- Overview.html 8 Jun 2010 15:45:37 -0000 1.34
+++ Overview.html 9 Jun 2010 15:04:15 -0000 1.35
@@ -35,74 +35,22 @@
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
- .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
- .matrix, .matrix td { border: none; text-align: right; }
- .matrix { margin-left: 2em; }
- .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
- .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
- .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
+
- .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
- img.extra { float: right; }
- pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
- pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
- pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
- pre.css:first-line { color: #AAAA50; }
- dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
- hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
- dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
- dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
- dl.domintro dd p { margin: 0.5em 0; }
- dl.switch { padding-left: 2em; }
- dl.switch > dt { text-indent: -1.5em; }
- dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
- dl.triple { padding: 0 0 0 1em; }
- dl.triple dt, dl.triple dd { margin: 0; display: inline }
- dl.triple dt:after { content: ':'; }
- dl.triple dd:after { content: '\A'; white-space: pre; }
- .diff-old { text-decoration: line-through; color: silver; background: transparent; }
- .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
- a .diff-new { border-bottom: 1px blue solid; }
+
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
- p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
-
- div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
- div.head p { margin: 0; }
- div.head h1 { margin: 0; }
- div.head .logo { float: right; margin: 0 1em; }
- div.head .logo img { border: none } /* remove border from top image */
- div.head dl { margin: 1em 0; }
- p.copyright { font-size: x-small; font-style: oblique; margin: 0; }
-
- body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
- body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
- body > .toc > li > * { margin-bottom: 0.5em; }
- body > .toc > li > * > li > * { margin-bottom: 0.25em; }
- .toc, .toc li { list-style: none; }
+
+
- .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
- .brief li { margin: 0; padding: 0; }
- .brief li p { margin: 0; padding: 0; }
+
- .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
- .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
- .category-list li { display: inline; }
- .category-list li:not(:last-child)::after { content: ', '; }
- .category-list li > span, .category-list li > a { text-transform: lowercase; }
- .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
+
- .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
- .XXX > :first-child { margin-top: 0; }
- p .XXX { line-height: 3em; }
- .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
- .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
- .annotation :link, .annotation :visited { color: inherit; }
- .annotation :link:hover, .annotation :visited:hover { background: transparent; }
- .annotation span { border: none ! important; }
+
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
@@ -114,9 +62,6 @@
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
- .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
- .bookkeeping { font-size: 0.8em; margin: 2em 0; }
- .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
@@ -146,83 +91,22 @@
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
- .tall-and-narrow {
- font-size: 0.6em;
- column-width: 25em;
- column-gap: 1em;
- -moz-column-width: 25em;
- -moz-column-gap: 1em;
- -webkit-column-width: 25em;
- -webkit-column-gap: 1em;
- }
-
- ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
- ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
- ul.domTree li li { list-style: none; }
- ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
- ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
- ul.domTree span { font-style: italic; font-family: serif; }
- ul.domTree .t1 code { color: purple; font-weight: bold; }
- ul.domTree .t2 { font-style: normal; font-family: monospace; }
- ul.domTree .t2 .name { color: black; font-weight: bold; }
- ul.domTree .t2 .value { color: blue; font-weight: normal; }
- ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
- ul.domTree .t7 code, .domTree .t8 code { color: green; }
- ul.domTree .t10 code { color: teal; }
-
- </style><style type="text/css">
-
- .applies thead th > * { display: block; }
- .applies thead code { display: block; }
- .applies tbody th { whitespace: nowrap; }
- .applies td { text-align: center; }
- .applies .yes { background: yellow; }
-
- .matrix, .matrix td { border: none; text-align: right; }
- .matrix { margin-left: 2em; }
-
- .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
- .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
- .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
-
- #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
- #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
- #table-example-1 caption { padding-bottom: 0.5em; }
- #table-example-1 thead, #table-example-1 tbody { border: none; }
- #table-example-1 th, #table-example-1 td { border: solid thin; }
- #table-example-1 th { font-weight: normal; }
- #table-example-1 td { border-style: none solid; vertical-align: top; }
- #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
- #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
- #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
- #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
- #table-example-1 tbody td:first-child::after { content: leader(". "); }
- #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
- #table-example-1 tbody td:first-child + td { width: 10em; }
- #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
- #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
-
- .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
- .apple-table-examples * { font-family: "Times", serif; }
- .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
- .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
- .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
- .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
- .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
- .apple-table-examples td { text-align: right; vertical-align: top; }
- .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
- .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
- .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
- .apple-table-examples sup { line-height: 0; }
- /*added styles*/
+ /*added styles*/
.example img {border: 1px}
h6 { text-transform: none; }
.element {width:400px;}
.warning1 {font-weight: bolder; font-style: italic; }
-
+
+
</style>
+
+
+
+
+
+
<style type="text/css">
<!--
@@ -244,16 +128,17 @@
<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> First Public Working Draft 10 June 2010</h2>
<dl><dt>This version:</dt><dd><a href="http://www.w3.org/TR/2010/WD-alt-techniques-20100610/">http://www.w3.org/TR/2010/WD-alt-techniques-20100610/</a></dd><dt>Latest published version:</dt>
- <dd><A href="http://www.w3.org/TR/html5-diff/">http://www.w3.org/TR/alt-techniques/</A> </dd><dt>Latest editor's draft:</dt><dd><a href="http://dev.w3.org/html5/alt-techniques/">http://dev.w3.org/html5/alt-techniques/</a></dd>
+ <dd><A href="http://www.w3.org/TR/alt-techniques/">http://www.w3.org/TR/alt-techniques/</A> </dd><dt>Latest editor's draft:</dt><dd><a href="http://dev.w3.org/html5/alt-techniques/">http://dev.w3.org/html5/alt-techniques/</a></dd>
<dt>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> © 0001 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p><hr></div>
- <div id="abstract" class="introductory section"><h2>Abstract</h2>
+
+<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 0001 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p><hr>
+</div>
+ <div id="abstract" class="introductory section"><h2 id="ha">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>
<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>
+ <h2 id="hb">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
@@ -281,7 +166,7 @@
<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>
+<h2 id="hc">Table of Contents</h2>
<ul>
<li><a href="#intro">Introduction</a>
<ul>
@@ -342,7 +227,7 @@
the page being read out by a voice Web
browser.</li>
</ul>
-<H3 id="good-practices">General Text Alternative Good Practices</H3>
+<h3 id="good-practices">General Text Alternative Good Practices</h3>
<UL>
<LI>Provide the same informational <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A> as the image.
<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>.
@@ -359,7 +244,7 @@
<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>
+<h5 id="hd">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>
@@ -388,96 +273,96 @@
<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>
+<h6 id="he">How long should a short text alternative be?</h6>
<p>The answer to this question very much depends on the context an image is being used in. While there are no definitive right or wrong lengths for text alternatives provided using the <code>img</code> elements <code>alt</code> attribute, the general consensus is that if the text alternative is longer than 75-100 characters (1 to 2 sentences), it should not be considered a short text alternative and should not be presented using the <code>alt </code>attribute.</p>
<p><span class="note">To do</span></p>
-<h3>The <code>figure</code> and <code>figcaption</code> elements</h3>
+<h3 id="hf">The <code>figure</code> and <code>figcaption</code> elements</h3>
<p><span class="note">to do</span></p>
-<h5>Advantages:</h5>
+<h5 id="hg">Advantages:</h5>
<ul>
<li>When supported by browsers and assistive technology the content of the <code>figcaption</code> will be explicitly associated with the image.</li>
</ul>
-<h5>Disadvantages:</h5>
+<h5 id="hi">Disadvantages:</h5>
<ul>
<li>The <code>figure</code> and <code>figcaption</code> elements are not currently supported by browsers or assistive technology. </li>
</ul>
-<p> </p>
-<h3>The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes</h3>
+
+<h3 id="hj">The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes</h3>
<p><span class="note">to do</span></p>
-<h4>aria-labelledby</h4>
-<h5>Advantages:</h5>
+<h4 id="hk">aria-labelledby</h4>
+<h5 id="hl">Advantages:</h5>
<ul>
<li>Text from several sources within the same document can be explicitly associated with an image.</li>
<li>Short text alternatives elsewhere in a document can be explicitly associated with the image.</li>
<li>Short text alternatives can be available for all users.</li>
</ul>
-<h5>Disadvantages:</h5>
+<h5 id="hm">Disadvantages:</h5>
<ul>
<li>Short text alternatives takes up visual display space if displayed.</li>
<li>Explicit association using <code>aria-labelledby</code> is not supported by some user agents and assistive technology.</li>
</ul>
-<h4>aria-describedby</h4>
-<h5>Advantages:</h5>
+<h4 id="hn">aria-describedby</h4>
+<h5 id="ho">Advantages:</h5>
<ul>
<li>Text from several sources within the same document can be explicitly associated with an image.</li>
<li>Long text alternatives elsewhere in a document can be explicitly associated with the image.</li>
<li>Long text alternatives can be available for all users.</li>
</ul>
-<h5>Disadvantages:</h5>
+<h5 id="hp">Disadvantages:</h5>
<ul>
<li>Long text alternatives takes up visual display space if displayed.</li>
<li>Explicit association using <code>aria-describedby</code> is not supported by some user agents and assistive technology.</li>
</ul>
-<h3>Text content within the same document or another document</h3>
+<h3 id="hq">Text content within the same document or another document</h3>
<p><span class="note">to do</span></p>
-<h5> </h5>
-<p> </p>
-<h3>Text content next to or prior to an image </h3>
+<h5 id="hr"> </h5>
+
+<h3 id="hs">Text content next to or prior to an image </h3>
<p><span class="note">to do</span></p>
-<h5>Advantages:</h5>
+<h5 id="ht">Advantages:</h5>
<ul>
<li>The text alternative is not repeated on and beside the image.</li>
<li>The text alternative is visible to all users.</li>
<li>The presence of the image may not be reported to users.</li>
</ul>
-<h5>Disadvantages:</h5>
+<h5 id="hu">Disadvantages:</h5>
<ul>
<li> Text alternative takes up visual display space.</li>
<li>The text alternative may not be explicitly associated with the image.</li>
<li>The presence of the image may not be reported to users.</li>
</ul>
-<p> </p>
-<h3>The <code>img</code> element <code>title</code> attribute</h3>
+
+<h3 id="hv">The <code>img</code> element <code>title</code> attribute</h3>
<p><span class="note">to do</span></p>
-<h5>Advantages:</h5>
+<h5 id="hw">Advantages:</h5>
<ul>
<li>The text alternative is explicitly associated with the image for some users.</li>
</ul>
-<h5>Disadvantages:</h5>
+<h5 id="hx">Disadvantages:</h5>
<ul>
<li> The display of the content of the title attribute is not displayed to users of most browsers when images are not supported or disabled.</li>
<li>The content of the title attribute is not available to users unless they can operate a mouse.</li>
</ul>
-<p> </p>
-<h3>The <code>img</code> element <code>longdesc</code> attribute</h3>
+
+<h3 id="hy">The <code>img</code> element <code>longdesc</code> attribute</h3>
<p><span class="note">to do</span></p>
-<h5>Advantages:</h5>
+<h5 id="hz">Advantages:</h5>
<ul>
<li>long text alternatives are explicitly associated with the image for users of assistive technology that supports <code>longdesc</code>.</li>
</ul>
-<h5>Disadvantages:</h5>
+<h5 id="haa">Disadvantages:</h5>
<ul>
<li>Long text alternative is not available to all users.</li>
<li>The <code>longdesc</code> attribute is only supported by a limited number of browsers and assistive technology.</li>
<li>The content of the page referenced by the<code> longdesc</code> is not available to all users.</li>
</ul>
-<p> </p>
+
<hr>
<h2 id="recommendations">Requirements and Recommendations:</h2>
<p>The requirements and recommendations for the <code><a href="http://dev.w3.org/html5/markup/img.html#img.attrs.alt">alt</a></code> attribute depend on what the image is intended to represent and the context in which it is used, as described in the following sections. Each section includes a description, code and graphical examples and links to related techniques.</p>
<h3 id="button-image-only"><span class="secno">1.</span> A link or button containing nothing but an image</h3>
<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>
+<h4 id="hab">Example 1.1</h4>
<div class="example">
<p>In this example, a user is asked to pick her preferred color
from a list of three. Each color is given by an image, but for
@@ -492,7 +377,7 @@
<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>
</div>
-<h4>Example 1.2</h4>
+<h4 id="hac">Example 1.2</h4>
<div class="example">
<p>In this example, a button has a set of images to indicate the
kind of color output desired by the user. The first image is used to give the text alternative.</p>
@@ -510,7 +395,7 @@
</pre>
<p>However, as the images form the visual representation of a single button and users will not normally interact with the individual images, adding the text alternative to one of the images only is most appropriate.</p>
</div>
-<h4>Related techniques and resources</h4>
+<h4 id="had">Related techniques and resources</h4>
<ul>
<li><a href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G196">Using a text alternative on one item within a group of images that describes all items in the group</a> (WCAG technique)</li>
<li><a href="http://universalusability.com/access_by_design/links/alt-text.html">Use alt-text for image links</a></li>
@@ -521,7 +406,7 @@
<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>
+<h4 id="hae">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>alt</code> attribute describes the process shown in the flowchart:</p>
<p><strong>Example Image:</strong></p>
@@ -551,7 +436,7 @@
is burned out. If it is, replace the bulb. If it still does not work; buy a new lamp.</p>
</div></pre>
</div>
-<h4>Example 2.3</h4>
+<h4 id="hae">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/states_and_properties#aria-describedby">aria-describedby</a> attribute:</p>
<p><strong>Example Code:</strong><br>
@@ -565,9 +450,9 @@
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> </h5>
+ <h5 id="haf"> </h5>
</div>
-<h4>Example 2.4</h4>
+<h4 id="hag">Example 2.4</h4>
<div class="example">
<p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using 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>
@@ -593,7 +478,7 @@
<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>
+<h4 id="hah">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>
<li><a href="http://www.w3.org/TR/WCAG-TECHS/G94.html">Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content </a>(WCAG 2.0 Technique)</li>
@@ -601,7 +486,7 @@
</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">alt</code> attribute SHOULD consist of the same text as written in the image itself. </p>
-<h4>Example 3.1</h4>
+<h4 id="hai">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
merely being used as a heading, to spice up the page for graphical
@@ -615,9 +500,9 @@
<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>
+
</div>
-<h4>Example 3.2</h4>
+<h4 id="haj">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
@@ -629,22 +514,22 @@
<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>
+ <h5 id="hak">Advantages:</h5>
<ul>
<li>Text alternative is explicitly associated with the image.</li>
</ul>
- <h5>Disadvantages:</h5>
+ <h5 id="hal">Disadvantages:</h5>
<ul>
<li>When text is represented in an image the text cannot be restyled to suit users needs.</li>
</ul>
</div>
-<h4>Related techniques and resources</h4>
+<h4 id="ham">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>
+<h4 id="han">Example 4.1</h4>
<div class="example">
<p>Consider an image containing a pie chart and associated text. It is recommended wherever possible to provide any associated text as text, not an image of text. If this is not possible include the text in the text alternative.</p>
<p><strong>Example Image:</strong></p>
@@ -654,7 +539,7 @@
<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>
</div>
-<h4>Example 4.2</h4>
+<h4 id="hao">Example 4.2</h4>
<div class="example">
<p>Here's another example of the same <a href="#piechart">pie chart</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><strong>Example code:</strong></p>
@@ -662,14 +547,14 @@
<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>
+ <h5 id="hap"> </h5>
</div>
-<h4>Related techniques and resources</h4>
+<h4 id="haq">Related techniques and resources</h4>
<p><span class="note">to do</span></p>
<h3 id="decorative"><span class="secno">5. </span>A purely decorative image that doesn't add any information</h3>
<p><A href="http://www.w3.org/TR/WCAG20/#puredecdef">Purely decorative</A> images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images. They have no meaning in themselves and do not provide page <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A>.</p>
<p>Purely decorative images MUST be marked up so they can be ignored by <A href="http://www.w3.org/TR/WCAG20/#atdef">assistive technology</A> with a null alt attribute (alt="") or preferably use CSS techniques. If the image isn't providing the user any informative <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A> or enhancing greater understanding of the <A href="http://www.w3.org/TR/WCAG20/#contentdef">content</A>, then the alt attribute MUST be empty.</p>
-<h4>Example 5.1</h4>
+<h4 id="har">Example 5.1</h4>
<div class="example">
<p>Here's an example of an image being used as a decorative banner for a persons blog, the image offers no information and so should have an empty alt attribute. While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.</p>
<p><strong>Example image in context:</strong></p>
@@ -678,14 +563,14 @@
<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>
<h1<strong></strong>>Clara's Blog</h1>
<p>Welcome to my blog...</p></pre>
</div>
-<h4>Related techniques and resources</h4>
+<h4 id="has">Related techniques and resources</h4>
<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>
@@ -698,7 +583,7 @@
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>
+<h4 id="hat">Example 6.1</h4>
<div class="example">
<p>Here is an example of an image closely related to the subject matter of the page content but not directly discussed. An
image of a painting inspired by a poem, on a page reciting that
@@ -717,7 +602,7 @@
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
-<h4>Example 6.2</h4>
+<h4 id="hau">Example 6.2</h4>
<div class="example">
<p>It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image. </p>
<p>In this example of the same image, there is a short text alternative included in the alt attribute, 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>
@@ -735,9 +620,9 @@
<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>
+<h4 id="hav">
<!-- <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>
@@ -772,7 +657,7 @@
<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>
+<h4 id="haw">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>
@@ -803,7 +688,7 @@
<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>
+<h4 id="hax">Related techniques and resources</h4>
<ul>
<li><a href="http://www.webaim.org/projects/screenreadersurvey/#images">Survey of Preferences of Screen Readers Users - Images</a></li>
<li><a href="http://www.rnib.org.uk/LIVINGWITHSIGHTLOSS/LEISURECULTURE/ARTSCRAFTS/PAINTING/Pages/audio_description_painting.aspx">Try audio describing a painting</a></li>
@@ -818,7 +703,7 @@
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
be set to zero.</p>
-<h4>Example 7.1</h4>
+<h4 id="hay">Example 7.1</h4>
<div class="example">
<p>An example of an img element used to collect web page statistics. The alt attribute is empty.</p>
<p><strong>Example code:</strong></p>
@@ -827,7 +712,7 @@
</pre>
</div>
-<h4>Related techniques and resources</h4>
+<h4 id="haz">Related techniques and resources</h4>
<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>
@@ -835,12 +720,12 @@
<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 conveyed textually, In such cases a text alternative MUST be provided.</p>
-<h4>Example 8.1</h4>
+<h4 id="hba">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>
<p><strong>Example Image in context: </strong></p>
<p><img src="images/home.gif" alt="A house icon next to the word 'home'." width="66" height="29"></p>
- <p> </p>
+
<p><strong>Example code 1 - inline image:</strong></p>
<pre><a href="home.html">
<img src="icon.gif" width="15" height="15" <strong>alt=""</strong>>Home</a>
@@ -857,7 +742,7 @@
<a href="home.html" id="home">Home</a></pre>
</div>
-<h4>Example 8.2</h4>
+<h4 id="hbb">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>
@@ -871,7 +756,7 @@
</pre>
</div>
-<h4>Example 8.3</h4>
+<h4 id="hbc">Example 8.3</h4>
<div class="example">
<p>In this example, we have a warning message, with a warning icon. The word "Warning!" is in emphasized text next the the icon. In this case the icon is redundant and therefore the <code>img </code>element MUST have an empty <code>alt</code> attribute. It would also be appropriate to add the icon using CSS.</p>
<p><strong>Example Image in context: </strong></p>
@@ -886,13 +771,13 @@
</pre>
</div>
-<p> </p>
-<h4>Related techniques and resources</h4>
+
+<h4 id="hbd">Related techniques and resources</h4>
<p><span class="note">to do</span></p>
<h3 id="pictures">9. Images of Pictures</h3>
<p>Images of pictures or graphics include visual representations of objects, people, scenes, abstractions, etc. This <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a> can convey a significant amount of information visually or provide a <a href="http://www.w3.org/TR/WCAG20/#sensoryexpdef">specific sensory experience</a> to a sighted person. Examples include photographs, paintings, drawings and artwork.</p>
<p>An appropriate text alternative for a picture is a brief description, or <a href="http://www.w3.org/TR/WCAG20/#namedef">name</a>. As in all text alternative authoring decisions, writing suitable text alternatives for pictures requires human judgment. The text value is subjective to the context where the image is used and the page author's writing style. Therefore, there is no single 'right' or 'correct' piece of alt text for any particular image. In addition to providing a short <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternative</a> that gives a brief description of the <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a>, also providing <a href="http://www.w3.org/TR/WCAG20/#suppcontentdef">supplemental content</a> through another means when appropriate may be useful.</p>
-<h4>Example 9.1</h4>
+<h4 id="hbe">Example 9.1</h4>
<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>
@@ -914,7 +799,7 @@
<figcaption>Lola prefers a bath to a shower.</figcaption>
</figure> </pre>
</div>
-<h4>Example 9.2</h4>
+<h4 id="hbf">Example 9.2</h4>
<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>
@@ -929,14 +814,14 @@
<figcaption>The first of the ten cards in the Rorschach test.</figcaption>
</figure> </pre>
</div>
-<h4>Related techniques and resources</h4>
+<h4 id="hbg">Related techniques and resources</h4>
<ul>
<li><a href="http://dev.w3.org/html5/markup/figure.html#figure">The HTML5 <code>figure</code> element</a></li>
<li><a href="http://dev.w3.org/html5/markup/figcaption.html">The HTML5 <code>figcaption</code> element</a></li>
</ul>
<h3 id="webcam">10. Webcam images</h3>
<p>Webcam images are static images that are automatically updated periodically. Typically the images are from a fixed viewpoint, the images may update on the page automatically as each new image is uploaded from the camera or the user may be required to refresh the page to view an updated image. Examples include traffic and weather cameras.</p>
-<h4>Example 10.1</h4>
+<h4 id="hbg">Example 10.1</h4>
<p>This example is fairly typical; the title and a time stamp are included in the image, automatically generated by the webcam software. It would be better if the text information was not included in the image, but as it is part of the image, it is required that it is provided as a text alternative. A caption is also provided using the <code>figure</code> and <code>figcaption</code> elements. As the image is provided to give a visual indication of the current weather near Sopwith House, a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it may be impractical to provide such information as a text alternative. </p>
<p>The text of the alt attribute includes a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software. The text alternative also includes a description of some aspects of what can be seen in the image which are unchanging, although weather conditions and time of day change. </p>
<p><strong>Note: </strong></p>
@@ -966,7 +851,7 @@
latest weather details</a> for Kingston upon Thames.</p>
</figure> </pre>
</div>
-<h4>Example 10.2</h4>
+<h4 id="hbh">Example 10.2</h4>
<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.
@@ -998,7 +883,7 @@
</figure>
</pre>
</div>
-<h4>Example 10.3</h4>
+<h4 id="hbi">Example 10.3</h4>
<p>The previous webcam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. both examples use include the longer text alternative in a paragraph associated with the image using <code>aria-describedby</code>. </p>
<p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith house, looking north.</p>
<div class="example">
@@ -1039,7 +924,7 @@
</figure> </pre>
</div>
-<h4>Related techniques and resources</h4>
+<h4 id="hbj">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://dev.w3.org/html5/markup/figure.html#figure">The HTML5 figure element</A></LI>
@@ -1048,7 +933,7 @@
<h3 id="imgslices">11. A group of images that form a single larger picture with and without links</h3>
<p>When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, one of the images MUST have its alt attribute set as per the relevant rules that would be appropriate for the picture as a whole, and then all the remaining images MUST have an empty alt attribute.</p>
-<h4>Example 11.1</h4>
+<h4 id="hbi">Example 11.1</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 letters "PIP" and the second with the word "CO". The alternative text ("PIP CO") is all in the first image.</p>
<p><strong>Example Image:</strong></p>
@@ -1061,7 +946,7 @@
</pre>
</div>
-<h4>Example 11.2</h4>
+<h4 id="hbk">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><strong>Example Image:</strong></p>
@@ -1075,15 +960,15 @@
</pre>
</div>
-<p> </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>
<p class="note">to do</p>
-<H3 id="captcha">13. CAPTCHA Images </H3>
+<h3 id="captcha">13. CAPTCHA Images </h3>
<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>
+<H4 id="hbl">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>
<div class="example">
<p><strong>Example Image:</strong></p>
@@ -1093,13 +978,14 @@
<!-- audio CAPTCHA option that allows the user to listen and type the word -->
<!-- form that asks a question --></PRE>
</div>
-<H4>Further Techniques </H4>
+<H4 id="hbm">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>
+<h3 id="logos">13. Logos</h3>
+<p class="note">to do</p>
+<!-- <p>Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such as a company, organization, project, band, software package, country, or some such.</p>
<p>If the logo is being used to represent the entity, e.g. as a page heading, the <A href="#attr-img-alt">alt</A> attribute MUST contain the name of the entity being represented by the logo. Though not recommended, the <A href="#attr-img-alt">alt</A> attribute may<EM></EM> contain text like the word "logo", as the visual style often conveys to the user that it is a logo for the company, but users who can't benefit from the visual information may appreciate the added information about what the image is.</p>
<p>If the logo is being used next to the name of the entity that it represents, then the logo is supplemental, and its <A href="#attr-img-alt">alt</A> attribute must instead be empty.</p>
<p>If the logo is merely used as decorative material (as branding, or, for example, as a side image in an article that mentions the entity to which the logo belongs), then the entry below on purely decorative images applies. If the logo is actually being discussed, then it is being used as a phrase or paragraph (the description of the logo) with an alternative graphical representation (the logo itself), and the first entry above applies.</p>
@@ -1113,9 +999,9 @@
<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>
+</DIV> -->
+
+<!-- <H4 id="hbn">Example 14.1</H4>
<p>This example shows a <a href="http://recaptcha.net/learnmore.html">CAPTCHA test</a> which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content. </p>
<div class="example">
<p><strong>Example Image:</strong></p>
@@ -1125,25 +1011,25 @@
<!-- audio CAPTCHA option that allows the user to listen and type the word -->
<!-- form that asks a question --></PRE>
</div>
-<H4>Further Techniques </H4>
+<H4 id="hbo">Further Techniques</H4>
<UL>
<LI><A title="http://www.w3.org/TR/WCAG20-TECHS/G143.html" href="http://www.w3.org/TR/WCAG20-TECHS/G143.html">Providing a text alternative that describes the purpose of the CAPTCHA</A> W3C Note. </LI>
<LI><A title="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G144.html" href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/G144.html">Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</A> W3C Note. </LI>
</UL>
-<p> </p>
+ -->
<hr>
<h2 id="glossary">Glossary</h2>
-<h3>alt text </h3>
+<h3 id="hbp">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>
+<h3 id="hbq">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 id="hbr">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>
+<h3 id="hbs">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>
+<h3 id="hbt">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>
+<h3 id="hbu">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>
Received on Wednesday, 9 June 2010 15:04:21 UTC