- From: poot <cvsmail@w3.org>
- Date: Mon, 29 Nov 2010 21:08:37 +0900 (JST)
- To: public-html-diffs@w3.org
steve: added info about figure/caption and aria-labelledby http://dev.w3.org/cvsweb/html5/alt-techniques/Overview.html?r1=1.57&r2=1.58&f=h =================================================================== RCS file: /sources/public/html5/alt-techniques/Overview.html,v retrieving revision 1.57 retrieving revision 1.58 diff -u -d -r1.57 -r1.58 --- Overview.html 28 Oct 2010 15:28:29 -0000 1.57 +++ Overview.html 29 Nov 2010 12:06:43 -0000 1.58 @@ -158,7 +158,7 @@ </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 28 October 2010</h2> +<h2 id="w3c-working-draft-05-may-2010"><acronym title="World Wide Web Consortium">W3C</acronym> Editor's Draft 29 November 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> @@ -293,9 +293,9 @@ <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 preceeded 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 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 preceeded 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 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> <p> </p> @@ -310,15 +310,29 @@ </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 empy 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 empy 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 empy 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> - <li class="note">to do</li> + <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> -<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> +<h6 id="he">How long should a 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> <h3 id="hf">The <code>figure</code> and <code>figcaption</code> elements</h3> +<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> @@ -326,13 +340,21 @@ </ul> <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> + <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">The <code>aria-labelledby</code> and <code>aria-describedby</code> attributes</h3> -<p><span class="note">to do</span></p> +<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 <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> <h4 id="hk">aria-labelledby</h4> -<h5 id="hl">Advantages:</h5> +<p id="hl">In browsers and assistive technology 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 an <code>id</code> value of an element which contains text. As both the <code>alt</code> attribute and the element 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 woman wearing a wig and a prosthetic ear"</strong>> + +<img src="example.jpg" <strong>aria-labelledby="a1"</strong>></pre> +<pre><p>Two men stood side by side on the escalator at Kingston station. +<span <strong>id="a1"</strong>>A woman wearing a wig and a prosthetic ear</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> @@ -742,7 +764,7 @@ </div> --> <h4 id="hav"> Example 6.3</h4> <p>This example is similar to the previous example as it also contains a link pointing to an external source of information about the painting. The difference being that text is included after the image as content of the link. </p> -<p><strong>Note:</strong> In HTML5 unlike HTMl 4 <a href="http://html5doctor.com/block-level-links-in-html-5/">links can contain 'block level' elements</a> such as <code>p</code> elements. The example below makes use of this change.</p> +<p><strong>Note:</strong> In HTML5 unlike HTML 4 <a href="http://html5doctor.com/block-level-links-in-html-5/">links can contain 'block level' elements</a> such as <code>p</code> elements. The example below makes use of this change.</p> <div class="example"> <p><strong>Example image in context: </strong></p> <div class="element1"> @@ -906,7 +928,7 @@ </figure> </pre> </div> <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> +<p>Context: An image on a page explaining in general terms Rorschach inkblot personality tests. The image is an abstract free form which is subjective to individual interpretation.</p> <div class="example"> <p><strong>Image example in context:</strong></p> <div class="element1"> @@ -916,7 +938,7 @@ </div> <p><strong>Code Example:</strong></p> <pre><figure> -<img src="Rorschach1.jpg" <strong>alt="An abstract, freeform inkblot."</strong>> +<img src="Rorschach1.jpg" <strong>alt="An abstract, free form inkblot."</strong>> <figcaption>The first of the ten cards in the Rorschach test.</figcaption> </figure> </pre> </div> @@ -1122,6 +1144,12 @@ --> <hr> <h2 id="glossary">Glossary</h2> + + <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> +<p>The accessible name is the name of a user interface element. Each platform <a href="#api">accessibility API</a> provides the accessible name property. The value of the accessible name may be derived from a visible (e.g., the visible text on a button) or invisible (e.g., the text alternative that describes an icon) property of the user interface element.</p> <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 id="hbq">assistive technology</h3>
Received on Monday, 29 November 2010 12:09:08 UTC