- From: poot <cvsmail@w3.org>
- Date: Thu, 27 Jan 2011 11:21:29 -0500
- To: public-html-diffs@w3.org
steve: re-arranged content to frontload the meat
http://dev.w3.org/cvsweb/html5/alt-techniques/Overview.html?r1=1.60&r2=1.61&f=h
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.60
retrieving revision 1.61
diff -u -d -r1.60 -r1.61
--- Overview.html 18 Jan 2011 10:39:01 -0000 1.60
+++ Overview.html 27 Jan 2011 16:20:04 -0000 1.61
@@ -5,10 +5,10 @@
<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; }
- h4 { margin: 2.5em 0 0.75em 0; }
- h5, h6 { margin: 2.5em 0 1em; }
+ h2 { margin: 1.5em 0 1em 0; }
+ h3 { margin: 1em 0 1em 0; }
+ h4 { margin: 1em 0 0.75em 0; }
+ h5, h6 { margin: 1em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
@@ -88,7 +88,7 @@
font-weight: bolder;
font-style: italic;
color: #900;
- font-size: x-large;
+ font-size: large;
}
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
@@ -160,10 +160,17 @@
</style>
<!-- <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD"> -->
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css">
- </head>
+ <style type="text/css">
+ .warning3 { font-weight: bolder;
+ font-style: italic;
+ color: #900;
+ font-size: x-large;
+}
+ </style>
+</head>
<body>
<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> Editor's Draft 18 January 2010</h2>
+<h2 id="w3c-working-draft-05-may-2010"><acronym title="World Wide Web Consortium">W3C</acronym> Editor's Draft 27 January 2010</h2>
<dl><!-- <dt>This version:</dt>
<dd><a href="http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/">http://www.w3.org/TR/2010/WD-html-alt-techniques-20100624/</a></dd><dt>Latest published version:</dt> -->
<!-- <dd><A href="http://www.w3.org/TR/html-alt-techniques/">http://www.w3.org/TR/html-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>
@@ -179,24 +186,8 @@
<h2 id="status">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 class="warning">Publication as a Working Draft does not imply endorsement by the W3C 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 is a First Public Working Draft.</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>.
-
-
-</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>
-
-
-<p>This specification is an extension to the HTML5 specification [<A href="#ref-html5">HTML5</A>]. 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 specification is a replacement for the 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 all of the normative and non normative content of the sections there-in.</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 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>. If you cannot do this then submit 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>)<a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG&component=alt%20techniques%20(editor:%20Steven%20Faulkner)"></a>. All feedback is welcome.</p>
-<p>Publication as a Working Draft does not imply endorsement by the W3C 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> must disclose the information in accordance with <a hef="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>
+ <p><a href="#docstat">Status of This Document - Further Details</a></p>
+</div>
<div id="toc">
<h2 id="hc">Table of Contents</h2>
@@ -206,26 +197,9 @@
<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>
+ <li><a href="#conformance">Conformance Requirements</a> </li>
</ul>
</li>
- <li><a href="#methods">Methods for Providing Text Alternatives</a>
- <ul>
- <li><a href="#altmethod">The img element alt attribute</a>
- <ul>
- <li><a href="#replacement">Is alt attribute content a replacement for an image?</a></li>
- <li><a href="#empty">Using an empty alt attribute</a></li>
- <li><a href="#he">How long should a short text alternative be?</a></li>
- </ul>
- </li>
- <li><a href="#hf">The figure and figcaption elements</a></li>
- <li><a href="#hj">The aria-labelledby and aria-describedby attributes</a></li>
- <li><a href="#hq">Text content within the same document or another document</a></li>
- <li><a href="#hs">Text content placed next to an image</a></li>
- <li><a href="#hv">The img element title attribute</a></li>
- <li><a href="#hy">The img element longdesc attribute</a></li>
- </ul>
- </li>
<li><a href="#Recommendations">Requirements and Recommendations</a>:
<ul>
<li><a href="#button-image-only">1. A link or button containing nothing but an image</a></li>
@@ -241,11 +215,29 @@
<li><a href="#imgslices">11. A group of images that form a single larger picture with and without links</a></li>
<li><a href="#unknown">12. When a text alternative is unknown at the time of publication</a></li>
<li><a href="#captcha">13. CAPTCHA images</a></li>
+ </ul>
+ </li>
+ <li><a href="#methods">Methods for Providing Text Alternatives</a>
+ <ul>
+ <li><a href="#altmethod">The img element alt attribute</a>
+ <ul>
+ <li><a href="#replacement">Is alt attribute content a replacement for an image?</a></li>
+ <li><a href="#empty">Using an empty alt attribute</a></li>
+ <li><a href="#he">How long should a short text alternative be?</a></li>
+ </ul>
+ </li>
+ <li><a href="#hf">The figure and figcaption elements</a></li>
+ <li><a href="#hj">The aria-labelledby and aria-describedby attributes</a></li>
+ <li><a href="#hq">Text content within the same document or another document</a></li>
+ <li><a href="#hs">Text content placed next to an image</a></li>
+ <li><a href="#hv">The img element title attribute</a></li>
+ <li><a href="#hy">The img element longdesc attribute</a> </li>
</ul>
</li>
<li><a href="#glossary">Glossary</a></li>
</ul>
</div>
+<hr>
<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>
@@ -274,176 +266,7 @@
<p>All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.</p>
<p>The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in <a href="http://www.apps.ietf.org/rfc/rfc2119.html">RFC2119</a>.</p>
<hr>
-<h2 id="methods">Methods for Providing Text Alternatives</h2>
-<h3 id="native">Native HTML methods</h3>
-<h4 id="altmethod">The <code>img</code> element <code>alt</code> attribute</h4>
-<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 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>
- <li>Inclusion of text alternatives as alt attribute content does not impact upon the default visual display of content.</li>
-</ul>
-<h5 id="hdd">Disadvantages:</h5>
-<ul>
- <li>Content of the alt attribute is not available to some users who may find it useful.</li>
- <li>If the alt attribute content is too long it may cause display issues in some browsers.</li>
- <li>If the alt attribute content is too long it may cause reading issues in some assistive technologies.</li>
- <li>Semantic structure cannot be added to alt attribute content.</li>
-</ul>
-<h5 id="replacement">Is alt attribute content a replacement for an image?</h5>
-<p>The answer to this question depends on the content of the image and the context the image is being used in:</p>
-<ul>
- <li>When an image contains too much information to use the alt attribute as a container for a text alternative the alt attribute content can be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a more complete text alternative that is programmatically associated with the image. Refer to <a href="#haee">Example 2.3</a>.</li>
- <li>When an image contains structured information that cannot be conveyed using the alt attribute as a container for a text alternative the <code>alt</code> attribute content SHOULD be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a structured text alternative that is programmatically associated with the image. Refer to <a href="#hag21">Example 2.5</a>.</li>
- <li>When an image is used to represent text and it is the authors intent the purpose of the using an image of text is to achieve a visual style, the alt attribute content SHOULD be considered as a replacement for the image. Refer to <a href="#img-of-text">Section 3</a>.</li>
- <li>When an image is decorative and it is the authors intent that it not convey any information, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. Refer to <a href="#decorative">Section 5</a>.</li>
- <li>When it is the authors intent that image is not to be seen by users, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. Refer to <a href="#img-not-for-user">Section 7</a>.</li>
- <li>When an image is immediately proceeded or preceded by a text alternative and the image and the text alternative are not complex in nature, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. <span class="note">to do</span></li>
- <li>When an image is the sole content of a link, the alt attribute content SHOULD be a brief description of the link target. Refer to <a href="#hba">Example 1.1</a>.</li>
- <li>When an image is the content of a link and is immediately proceeded or preceded by a brief description of the link target, the <code>alt</code> attribute content SHOULD be empty. Refer to <a href="#hba">Example 8.1</a>.</li>
- <li>When an image is the content of a link that also contains structured text content, if the text content is a description of the link target, the <code>alt</code> attribute content MAY be empty or a text alternative for the image. If the text content is not a description of the link target, the alt attribute content SHOULD be a brief description of the link target. <a href="#hav">Refer to Example 6.3</a>. <span class="note">to do</span></li>
-</ul>
-<h5 id="empty">Using an empty <code>alt</code> attribute <code>alt=""</code></h5>
-<p>Circumstances in which <strong>it is</strong> appropriate to use an empty or null <code>alt</code> attribute:</p>
-<ul>
- <li>An image is purely <a href="#decorative">decorative</a>.</li>
- <li>An image is not meant to be <a href="#img-not-for-user">visible to any user</a>.</li>
- <li>An image consists of text that is repeated as text or a <a href="#icons">graphical symbol</a> whose meaning is conveyed as text, immediately before or after the image.</li>
- <li>The image is part of a <a href="#imgslices">group of images</a> that form a single larger picture and one of the other images in the group has a text alternative which serves as the text alternative for the single larger picture.</li>
- <li>The image is included as the content of a link and there is <a href="#hba">other content included</a> that clearly describes the link target.</li>
-</ul>
-<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. Using an empty alt attribute hides an image from some users. If an image has a caption the image needs to be discoverable by users, otherwise a caption is present that refers to nothing for some users.</li>
- <li>An image contains relevant information not available in the same document as text. Using an empty alt attribute hides an image from some users, in order to have the possibility of interrogating the image, the image must be discoverable.</li>
- <li>An image contains relevant information, an alternative interpretation of which is available in the same document as structured text. Using an empty alt attribute hides an image from some users, which is incorrect, the image is not meaningless, it contains information which a range of users could interpret with the aid of the short text alternative and longer description. It also provides a text alternative for users who have images turned off in their browsers, so they can, if they wish, load and view the image. If an empty <code>alt</code> attribute is present there may be no indication that an image is present. Furthermore if a description of an image is provided in a document, a <a href="#hpa">programmatic association</a> between the image and the descriptive text is required, using an empty alt attribute on the image effectively precludes the assigning of a programmatic association.</li>
-</ul>
-<h5 id="he">How long should a text alternative be?</h5>
-<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>
-<h4 id="hf">The <code>figure</code> and <code>figcaption</code> elements</h4>
-<p>The <code>figure</code> and <code>figcaption</code> elements provide a method to explicitly associate a caption with with a variety of content including images. Any content inside the <code>figure</code> element that is not contained within the <code>figcaption</code> element is labelled by the content of the <code>figcaption</code> element. The <code>figcaption</code> content may be an adjunct to the text alternative provided using the alt attribute:</p>
-<p><strong>Example:</strong></p>
-<pre>
-<figure>
-<img src="example.jpg" <strong>alt="A woman wearing a wig and a prosthetic ear."</strong>>
-<figcaption><strong>Figure 1</strong></figcaption>
-</figure>
-</pre>
-
-<p>The <code>figcaption</code> content may be a text alternative for the image, obviating the need for a text alternative provided using the <code>alt</code> attribute. This would only be the case if the <code>figcaption</code> content provides an adequate text alternative for the visual content in the image:</p>
-<p><strong>Example:</strong></p>
-<pre>
-<figure>
-<img src="example.jpg">
-<figcaption><strong>Figure 1: A woman wearing a wig and a prosthetic ear.</strong></figcaption>
-</figure></pre>
-<p><span class="note">to do</span></p>
-<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 id="hi">Disadvantages:</h5>
-<ul>
- <li>The <code>figure</code> and <code>figcaption</code> elements are not currently accessibility supported by browsers or assistive technology. </li>
-</ul>
-
-<h3 id="hj"> </h3>
-<h4 id="hq">Text content within the same document or another document</h4>
-<p><span class="note">to do</span></p>
-<h4 id="hs">Text content next to or prior to an image </h4>
-<p><span class="note">to do</span></p>
-<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 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>
-
-<h4 id="hv">The <code>img</code> element <code>title</code> attribute</h4>
-<p><span class="note">to do</span></p>
-<h5 id="hw">Advantages:</h5>
-<ul>
- <li>The text alternative is explicitly associated with the image for some users.</li>
-</ul>
-<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>
-
-<h4 id="hy">The <code>img</code> element <code>longdesc</code> attribute</h4>
-<p><span class="note">to do</span></p>
-<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 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>
-<h3>WAI-ARIA methods</h3>
-<p>The W3C Accessible Rich Internet Applications (<a href="../http://www.w3.org/WAI/PF/aria/">WAI-ARIA 1.0</a>) specification provides additonal attributes that can be added to HTML elements. Some of these attributes can be used to provide text alternatives for images. It is recommended that the <a href="../../../Users/Steve/AppData/Local/Microsoft/Windows/Temporary Internet Files/Content.IE5/FY5XNVZ6/#native">native HTML methods</a> for providing text alternatives be used where ever possible. In some cases the addition of ARIA attributes can be used to fill the gaps in browser and assistive technology support for native HTML methods.</p>
-<h4 id="hj2">The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes</h4>
-<p>The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes can be used to explictly associate text content within a document with any HTML element including the <code>img</code> element. Text content associated using aria-labelledby is mapped to the elements <a href="#acc_name">accessible name</a> property in <a href="#api">accessibility API</a>s. Text content associated using <code>aria-describedby</code> is mapped to the accessible description property in accessibility APIs. </p>
-<h5 id="hk">aria-labelledby</h5>
-<p id="hl">In browsers and <a href="../#hbq">assistive technology</a> that support <code>aria-labelledby</code>, for assistive technology users, there is no difference between to using <code>aria-labelledby</code> to providea text alternative and using the <code>alt</code> attribute, in the example below, the first <code>img</code> element has an alt attribute which provides the accessible name for the <code>img</code>. The second references 2 <code>id</code> values of elements which contains text. As both the <code>alt</code> attribute and the elements referenced by the <code>aria-labelledby</code> attribute contain the same text, the resulting accessible name will be the same. </p>
-<p><strong>Example</strong>:</p>
-<pre>
-<img src="example.jpg" <strong>alt="A red moped with a fox tail arial"</strong>>
-<img src="example.jpg" <strong>aria-labelledby="a2 a1"</strong>></pre>
-<pre><p>Two men stood side by side <span <strong>id="a1"</strong>>on an escalator</span> at Kingston station.
-<span <strong>id="a2"</strong>>A woman wearing a wig</span> stood behind them.</p></pre>
-<h5>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 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>
- <li>Unlike the alt attribute, the text alternative is not displayed as a replacement for an image when image display is disabled or not supported.</li>
-</ul>
-<h5 id="hn">aria-describedby</h5>
-<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 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>
-<h5>aria-label</h5>
-<h5 id="ho2">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 id="hp2">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>
-<h5>role="presentation" </h5>
-<h5>role="img"</h5>
-<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>
@@ -1167,9 +990,175 @@
</UL>
-->
<hr>
+<h2 id="methods2">Methods for Providing Text Alternatives</h2>
+<h3 id="native">Native HTML methods</h3>
+<h4 id="altmethod">The <code>img</code> element <code>alt</code> attribute</h4>
+<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 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>
+ <li>Inclusion of text alternatives as alt attribute content does not impact upon the default visual display of content.</li>
+</ul>
+<h5 id="hdd">Disadvantages:</h5>
+<ul>
+ <li>Content of the alt attribute is not available to some users who may find it useful.</li>
+ <li>If the alt attribute content is too long it may cause display issues in some browsers.</li>
+ <li>If the alt attribute content is too long it may cause reading issues in some assistive technologies.</li>
+ <li>Semantic structure cannot be added to alt attribute content.</li>
+</ul>
+<h5 id="replacement">Is alt attribute content a replacement for an image?</h5>
+<p>The answer to this question depends on the content of the image and the context the image is being used in:</p>
+<ul>
+ <li>When an image contains too much information to use the alt attribute as a container for a text alternative the alt attribute content can be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a more complete text alternative that is programmatically associated with the image. Refer to <a href="#haee">Example 2.3</a>.</li>
+ <li>When an image contains structured information that cannot be conveyed using the alt attribute as a container for a text alternative the <code>alt</code> attribute content SHOULD be a label for the image. This label MAY be a brief description that identifies the image. This SHOULD be accompanied by a structured text alternative that is programmatically associated with the image. Refer to <a href="#hag21">Example 2.5</a>.</li>
+ <li>When an image is used to represent text and it is the authors intent the purpose of the using an image of text is to achieve a visual style, the alt attribute content SHOULD be considered as a replacement for the image. Refer to <a href="#img-of-text">Section 3</a>.</li>
+ <li>When an image is decorative and it is the authors intent that it not convey any information, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. Refer to <a href="#decorative">Section 5</a>.</li>
+ <li>When it is the authors intent that image is not to be seen by users, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. Refer to <a href="#img-not-for-user">Section 7</a>.</li>
+ <li>When an image is immediately proceeded or preceded by a text alternative and the image and the text alternative are not complex in nature, an empty alt attribute SHOULD be considered as an indication that the image can be safely ignored. <span class="note">to do</span></li>
+ <li>When an image is the sole content of a link, the alt attribute content SHOULD be a brief description of the link target. Refer to <a href="#hba">Example 1.1</a>.</li>
+ <li>When an image is the content of a link and is immediately proceeded or preceded by a brief description of the link target, the <code>alt</code> attribute content SHOULD be empty. Refer to <a href="#hba">Example 8.1</a>.</li>
+ <li>When an image is the content of a link that also contains structured text content, if the text content is a description of the link target, the <code>alt</code> attribute content MAY be empty or a text alternative for the image. If the text content is not a description of the link target, the alt attribute content SHOULD be a brief description of the link target. <a href="#hav">Refer to Example 6.3</a>. <span class="note">to do</span></li>
+</ul>
+<h5 id="empty">Using an empty <code>alt</code> attribute <code>alt=""</code></h5>
+<p>Circumstances in which <strong>it is</strong> appropriate to use an empty or null <code>alt</code> attribute:</p>
+<ul>
+ <li>An image is purely <a href="#decorative">decorative</a>.</li>
+ <li>An image is not meant to be <a href="#img-not-for-user">visible to any user</a>.</li>
+ <li>An image consists of text that is repeated as text or a <a href="#icons">graphical symbol</a> whose meaning is conveyed as text, immediately before or after the image.</li>
+ <li>The image is part of a <a href="#imgslices">group of images</a> that form a single larger picture and one of the other images in the group has a text alternative which serves as the text alternative for the single larger picture.</li>
+ <li>The image is included as the content of a link and there is <a href="#hba">other content included</a> that clearly describes the link target.</li>
+</ul>
+<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. Using an empty alt attribute hides an image from some users. If an image has a caption the image needs to be discoverable by users, otherwise a caption is present that refers to nothing for some users.</li>
+ <li>An image contains relevant information not available in the same document as text. Using an empty alt attribute hides an image from some users, in order to have the possibility of interrogating the image, the image must be discoverable.</li>
+ <li>An image contains relevant information, an alternative interpretation of which is available in the same document as structured text. Using an empty alt attribute hides an image from some users, which is incorrect, the image is not meaningless, it contains information which a range of users could interpret with the aid of the short text alternative and longer description. It also provides a text alternative for users who have images turned off in their browsers, so they can, if they wish, load and view the image. If an empty <code>alt</code> attribute is present there may be no indication that an image is present. Furthermore if a description of an image is provided in a document, a <a href="#hpa">programmatic association</a> between the image and the descriptive text is required, using an empty alt attribute on the image effectively precludes the assigning of a programmatic association.</li>
+</ul>
+<h5 id="he">How long should a text alternative be?</h5>
+<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>
+<h4 id="hf">The <code>figure</code> and <code>figcaption</code> elements</h4>
+<p>The <code>figure</code> and <code>figcaption</code> elements provide a method to explicitly associate a caption with with a variety of content including images. Any content inside the <code>figure</code> element that is not contained within the <code>figcaption</code> element is labelled by the content of the <code>figcaption</code> element. The <code>figcaption</code> content may be an adjunct to the text alternative provided using the alt attribute:</p>
+<p><strong>Example:</strong></p>
+<pre>
+<figure>
+<img src="example.jpg" <strong>alt="A woman wearing a wig and a prosthetic ear."</strong>>
+<figcaption><strong>Figure 1</strong></figcaption>
+</figure>
+</pre>
+<p>The <code>figcaption</code> content may be a text alternative for the image, obviating the need for a text alternative provided using the <code>alt</code> attribute. This would only be the case if the <code>figcaption</code> content provides an adequate text alternative for the visual content in the image:</p>
+<p><strong>Example:</strong></p>
+<pre>
+<figure>
+<img src="example.jpg">
+<figcaption><strong>Figure 1: A woman wearing a wig and a prosthetic ear.</strong></figcaption>
+</figure></pre>
+<p><span class="note">to do</span></p>
+<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 id="hi">Disadvantages:</h5>
+<ul>
+ <li>The <code>figure</code> and <code>figcaption</code> elements are not currently accessibility supported by browsers or assistive technology. </li>
+</ul>
+<h3 id="hj"> </h3>
+<h4 id="hq">Text content within the same document or another document</h4>
+<p><span class="note">to do</span></p>
+<h4 id="hs">Text content next to or prior to an image </h4>
+<p><span class="note">to do</span></p>
+<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 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>
+<h4 id="hv">The <code>img</code> element <code>title</code> attribute</h4>
+<p><span class="note">to do</span></p>
+<h5 id="hw">Advantages:</h5>
+<ul>
+ <li>The text alternative is explicitly associated with the image for some users.</li>
+</ul>
+<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>
+<h4 id="hy">The <code>img</code> element <code>longdesc</code> attribute</h4>
+<p><span class="note">to do</span></p>
+<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 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>
+<h3>WAI-ARIA methods</h3>
+<p>The W3C Accessible Rich Internet Applications (<a href="../http://www.w3.org/WAI/PF/aria/">WAI-ARIA 1.0</a>) specification provides additonal attributes that can be added to HTML elements. Some of these attributes can be used to provide text alternatives for images. It is recommended that the <a href="../../../Users/Steve/AppData/Local/Microsoft/Windows/Temporary Internet Files/Content.IE5/FY5XNVZ6/#native">native HTML methods</a> for providing text alternatives be used where ever possible. In some cases the addition of ARIA attributes can be used to fill the gaps in browser and assistive technology support for native HTML methods.</p>
+<h4 id="hj2">The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes</h4>
+<p>The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes can be used to explictly associate text content within a document with any HTML element including the <code>img</code> element. Text content associated using aria-labelledby is mapped to the elements <a href="#acc_name">accessible name</a> property in <a href="#api">accessibility API</a>s. Text content associated using <code>aria-describedby</code> is mapped to the accessible description property in accessibility APIs. </p>
+<h5 id="hk">aria-labelledby</h5>
+<p id="hl">In browsers and <a href="../#hbq">assistive technology</a> that support <code>aria-labelledby</code>, for assistive technology users, there is no difference between to using <code>aria-labelledby</code> to providea text alternative and using the <code>alt</code> attribute, in the example below, the first <code>img</code> element has an alt attribute which provides the accessible name for the <code>img</code>. The second references 2 <code>id</code> values of elements which contains text. As both the <code>alt</code> attribute and the elements referenced by the <code>aria-labelledby</code> attribute contain the same text, the resulting accessible name will be the same. </p>
+<p><strong>Example</strong>:</p>
+<pre>
+<img src="example.jpg" <strong>alt="A red moped with a fox tail arial"</strong>>
+
+<img src="example.jpg" <strong>aria-labelledby="a2 a1"</strong>></pre>
+<pre><p>Two men stood side by side <span <strong>id="a1"</strong>>on an escalator</span> at Kingston station.
+<span <strong>id="a2"</strong>>A woman wearing a wig</span> stood behind them.</p></pre>
+<h5>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 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>
+ <li>Unlike the alt attribute, the text alternative is not displayed as a replacement for an image when image display is disabled or not supported.</li>
+</ul>
+<h5 id="hn">aria-describedby</h5>
+<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 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>
+<h5>aria-label</h5>
+<h5 id="ho2">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 id="hp2">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>
+<h5>role="presentation" </h5>
+<h5>role="img"</h5>
+<hr>
<h2 id="glossary">Glossary</h2>
- <h3 id="api">Accessibility <abbr title="Application Programming Interface">API</abbr></h3>
+<h3 id="api">Accessibility <abbr title="Application Programming Interface">API</abbr></h3>
<p>Operating systems and other platforms provide a set of interfaces that expose information about <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/terms#def_object">objects</a> and <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/terms#def_event">events</a> to <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/terms#def_at">assistive technologies</a>. Assistive technologies use these interfaces to get information about and interact with those <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/terms#def_widget">widgets</a>. Examples of this are the <a href="http://java.sun.com/javase/technologies/accessibility/index.jsp">Java Accessibility <abbr title="Application Programming Interface">API</abbr></a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_JAPI">JAPI</a>], <a href="http://msdn.microsoft.com/en-us/library/ms697270%28VS.85%29.aspx">Microsoft Active Accessibility</a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_MSAA">MSAA</a>], <a href="http://developer.applecom/library/mac/documentation/Cocoa/Conceptual/Accessibility/cocoaAXIntro/cocoaAXintro.html">the Mac <acronym title="OS Ten">OS X</acronym> Accessibility Protocol</a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_AXAPI">AXAPI</a>], the <a href="http://library.gnome.org/devel/atk/">Gnome Accessibility Toolkit (ATK)</a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_ATK">ATK</a>], and <a href="http://www.linuxfoundation.org/collaborate/workgroups/accessibility/iaccessible2">IAccessible2</a> [<a href="http://www.w3.org/TR/wai-aria/references#ref_IA2">IA2</a>].
</p>
<h3 id="acc_name">Accessible name</h3>
@@ -1190,6 +1179,20 @@
<pre class="example"><img src="null.gif" <strong>alt=""</strong>></pre>
<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>
-<h2 id="acknowledgements">Acknowledgements</h2>
+<h2 id="docstat">Document Status further details</h2>
+<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>. </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>
+<p>This specification is an extension to the HTML5 specification [<A href="#ref-html5">HTML5</A>]. 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 specification is a replacement for the 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 all of the normative and non normative content of the sections there-in.</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 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>. If you cannot do this then submit 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>)<a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=HTML%20WG&component=alt%20techniques%20(editor:%20Steven%20Faulkner)"></a>. All feedback is welcome.</p>
+<p>Publication as a Working Draft does not imply endorsement by the W3C 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> must 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>
+<h2>Acknowledgements</h2>
<p class="note">In no particular order and incomplete.</p>
<p>Laura Carlson, Josh O Connor, Gez Lemon, Anne van Kesteren, Ian Hickson, Mike Smith, Mike Paciello, Bim Egan, Gregory Rosmaita, Michael Cooper, Janina Sajka, Matt May, Bevi Chagnon, Jonathan Avila, Pat Rees, Charlie Pike, Andy Maseyk, Rich Clark</p>
Received on Thursday, 27 January 2011 16:21:32 UTC