- From: Michael Smith via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 01 Mar 2010 15:25:00 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv1553
Modified Files:
Overview.html
Log Message:
alt-techniques update from Steven Faulkner
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -d -r1.2 -r1.3
--- Overview.html 1 Mar 2010 15:23:44 -0000 1.2
+++ Overview.html 1 Mar 2010 15:24:58 -0000 1.3
@@ -223,12 +223,12 @@
</head>
<body>
<h1>HTML5: Techniques for providing useful text alternatives</h1>
-<h2>Editor's Draft 15th February 2010</h2>
+<h2>Editor's Draft 28th February 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 best practice guidance for authors of HTML documents on providing text alternatives for images. </p>
+<p>This document contains author conformance requirements for use of the alt attribute in HTML5 and best practice guidance for authors of HTML documents on providing text alternatives for images. </p>
<H3>Status of This document</H3>
<p>This document is for review by the HTML and Protocols, Formats working groups and other interested people. It is subject to change without notice. This document has no formal standing within W3C. The basis of the current content is from sections <A title="4.8.2.1.1" href="http://dev.w3.org/html5/spec/text-level-semantics.html#a-link-or-button-containing-nothing-but-the-image">4.8.2.1.1</A> to <A title="4.8.2.1.11" href="http://dev.w3.org/html5/spec/text-level-semantics.html#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images">4.8.2.1.11</A> of the HTML5 specification and the <A href="http://www.paciellogroup.com/blog/misc/uc/">text produced</A> for <A href="http://www.w3.org/html/wg/tracker/actions/54">Action 54</A> in the HTML issue tracker.</p>
<h2>Table of Contents</h2>
@@ -238,9 +238,10 @@
<li><a href="#text-alt">Text Alternatives</a></li>
<li><a href="#example-benefits">Examples of scenarios where users benefit from text alternatives for images</a></li>
<li><a href="#good-practices">General Text Alternative Good Practices</a></li>
+ <li><a href="#conformance">Conformance Requirements</a></li>
</ul>
</li>
- <li><a href="#Recommendations">Recommendations</a>:
+ <li><a href="#Recommendations">Requirements and Recommendations</a>:
<ul>
<li><a href="#button-image-only">1. A link or button containing nothing but an image</a></li>
<li><a href="#graphical-representations">2. Graphical representations: charts, diagrams, graphs, maps, illustrations</a></li>
@@ -279,15 +280,18 @@
<LI>Where an image performs a specific function, such as a graphical link, provide information about its <A href="http://www.w3.org/TR/WCAG20/#functiondef">functionality</A>.
<LI>Be succinct as possible while still conveying equivalent values. Short text that describes its purpose or gives an overview will often suffice.
<LI>Write suitable alt text according to context. The same image in a different situation may need very different alt text.
- <LI>Avoid redundant alt text. An example of this would be repeating the same text in your document, as well as in the alt attribute, and is unnecessary. </LI>
+ <LI>Avoid redundant alt text. An example of this would be repeating the same text in your document, as well as in the alt attribute, and is unnecessary. ]</LI>
</UL>
-<h2 id="recommendations">Recommendations:</h2>
-<p>The recommendations for the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute depend on what the image is intended to represent and the context in which it is used, as
+<h3 id="conformance">Conformance Requirements</h3>
+<p>All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.</p>
+<p>The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in <a href="http://www.apps.ietf.org/rfc/rfc2119.html">RFC2119</a>.</p>
+<h2 id="recommendations">Requirements and Recommendations:</h2>
+<p>The requirements and recommendations for the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute depend on what the image is intended to represent and the context in which it is used, as
described in the following sections. Each section includes a description, code and graphical examples and links to related techniques.</p>
<h3 id="button-image-only"><span class="secno">1. </span>A link or button containing nothing but an image</h3>
<p>When an <a href="#the-a-element">a</a> element that is a <a href="history.html#hyperlink">hyperlink</a>,
or a <code><a href="forms.html#the-button-element">button</a></code> element, has no text content but
- contains one or more images, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attributes must contain text that
+ contains one or more images, the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attributes MUST contain text that
together convey the purpose of the link or button.</p>
<h4>Example 1.1</h4>
<div class="example">
@@ -329,7 +333,7 @@
<li><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links want to be Links</a></li>
</ul>
<h3 id="graphical-representations"><span class="secno">2. </span>Graphical representations: charts, diagrams, graphs, maps, illustrations</h3>
-<p>The full text alternative may be provided in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute, or a shorter text alternative may be provided in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute or in a programmatically associated element, and a longer programmatically associated text alternative provided in the same document or in a linked document. </p>
+<p>The full text alternative MAY be provided in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute, or a shorter text alternative MAY be provided in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute or in a programmatically associated element, and a longer programmatically associated text alternative provided in the same document or in a linked document. </p>
<p>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>
@@ -440,7 +444,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"><a href="#attr-img-alt">alt</a></code> attribute should consist of the same text as
+ image is to display text using visual effects and /or fonts. While it is <em>strongly</em> recommended that text styled using CSS be used, but if this is not possible, in most of these cases, the content of the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute SHOULD consist of the same text as
written in the image itself. </p>
<h4>Example 3.1</h4>
<div class="example">
@@ -511,7 +515,7 @@
<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>Mark up purely decorative images 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 it is appropriate for the alt text to be empty.</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>
<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>
@@ -539,23 +543,24 @@
<p>An image that isn't discussed directly by the
surrounding text but still has some relevance can be included in a page
using the <code><a href="#the-img-element">img</a></code> element. Such images are more than mere decoration, they may augment the themes or subject matter of the page content and so
- 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>
+ 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>
<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
- poem. The following snippet shows an example (only the first verse is included in this snippet). 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>
+ poem. The following snippet shows an example. The image is a painting titled the "Lady of Shallot", it is inspired by the poem and its subject matter is derived from the poem. Therefore it is strongly recommended that a text alternative is provided. The description of the content of the image would be redundant for users who can view the image, so the appropriate place to put it is in the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute.</p>
<p><strong>Example Image </strong></p>
<p><img src="images/shalott.jpg" width="400" height="305" alt="A painting inspired by Alfred Tennyson's poem The Lady of Shalott"> </p>
<p><strong>Example code: </strong></p>
<pre>
-<h1>The Lady of Shalott</h1>
-<h2>A poem by Alfred Lord Tennyson</h2>
-<p><img src="shalott.jpeg" <strong>alt="A painting of a young women with long hair sitting in a wooden boat,
+<hgroup><h1>The Lady of Shalott</h1>
+<h2>A poem by Alfred Lord Tennyson</h2></hgroup>
+<figure><img src="shalott.jpeg" <strong>alt="A painting of a young women with long hair sitting in a wooden boat,
she is wearing a flowing white dress. A large piece of intricately patterned fabric is draped over the side.
In her right hand she holds the chain mooring the boat. Her expression is mournful. She stares at a crucifix
-lying in front of her. Beside it are three candles. Two have blown out."</strong>></p>
+lying in front of her. Beside it are three candles. Two have blown out."</strong>></figure>
+
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
@@ -567,8 +572,8 @@
<p><strong>Example code: </strong></p>
<pre><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2>
-<p><a href="http://bit.ly/5HJvVZ" title="A painting inspired by the poem">
-<img src="shalott.jpeg" <strong>alt="A painting inspired by the poem."</strong>><a/></p>
+<figure><a href="http://bit.ly/5HJvVZ" title="A painting inspired by the poem">
+<img src="shalott.jpeg" <strong>alt="A painting inspired by the poem."</strong>><a/></figure>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. --></pre>
</div>
@@ -609,9 +614,9 @@
<pre>
<h1>Medieval Nights</h1>
-<p><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></p>
+<figure><img src="shalott.jpeg" <strong>alt="Painting of a woman in a white flowing dress, sitting in a small boat."</strong>></figure>
<p>Join us for our medieval theme nights every Friday at
-Boaters Bar,on the riverside, Kingston upon Thames.</p</pre>
+Boaters Bar,on the riverside, Kingston upon Thames.</p></pre>
</div>
<h4>Related techniques and resources</h4>
@@ -627,8 +632,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 include an empty <code title="attr-img-alt">alt</code> attribute. This will </p>
-<p>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">
@@ -645,7 +649,7 @@
</ul>
<h3 id="icons"><span class="secno"> </span>8. A short phrase or label with an alternative graphical representation: icons, logos</h3>
<p>An icon is usually a simple picture representing a program, action, data file or a concept. Icons are intended to help users of visual browsers to recognize features at a glance.</p>
-<p>In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, provide an empty <A href="#attr-img-alt">alt</A> attribute. </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>
<h4>Example 8.1</h4>
<div class="example">
<p>In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text "home". The image has an empty alt text. Where images are used in this way, it is also be appropriate to add the image using CSS. </p>
@@ -718,6 +722,26 @@
<p> </p>
<h3>12. Images that are a key part of the content</h3>
<p><span class="note">to do</span></p>
+<H3>13. CAPTCHA Images </H3>
+<p><A title="http://www.w3.org/TR/WCAG20/#CAPTCHAdef" href="http://www.w3.org/TR/WCAG20/#CAPTCHAdef">CAPTCHA</A> stands for "Completely Automated Public Turing test to tell Computers and Humans Apart". CAPTCHA images are used for security purposes to confirm that <A title="http://www.w3.org/TR/WCAG20/#contentdef" href="http://www.w3.org/TR/WCAG20/#contentdef">content</A> is being accessed by a person rather than a computer. This authentication is done through visual verification of an image. CAPTCHA typically presents an image with characters or words in it that the user is to re-type. The image is usually distorted and has some noise applied to it to make the characters difficult to read. </p>
+<H4>Examples </H4>
+<UL>
+ <LI>An obscured image of textual characters </LI>
+ <LI>An obscured image of a word </LI>
+</UL>
+<H4>Markup Details </H4>
+<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>
+<H4>Markup Sample 1 </H4>
+<p>Context: A CAPTCHA test which uses a distorted image of text. </p>
+<PRE><img src="captcha.png" alt="An audio challenge follows if you cannot read the text in this image.">
+<!-- audio CAPTCHA option that allows the user to listen and type the word -->
+<!-- form that asks a question --></PRE>
+<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 World Wide Web Consortium 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 World Wide Web Consortium Note. </LI>
+</UL>
+<p> </p>
<hr>
<h2 id="glossary">Glossary</h2>
<h3>alt text </h3>
Received on Monday, 1 March 2010 15:25:02 UTC