- From: poot <cvsmail@w3.org>
- Date: Wed, 12 Jan 2011 11:28:14 -0500
- To: public-html-diffs@w3.org
steve: http://dev.w3.org/cvsweb/html5/alt-techniques/Overview.html?r1=1.58&r2=1.59&f=h =================================================================== RCS file: /sources/public/html5/alt-techniques/Overview.html,v retrieving revision 1.58 retrieving revision 1.59 diff -u -d -r1.58 -r1.59 --- Overview.html 29 Nov 2010 12:06:43 -0000 1.58 +++ Overview.html 12 Jan 2011 16:26:57 -0000 1.59 @@ -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 29 November 2010</h2> +<h2 id="w3c-working-draft-05-may-2010"><acronym title="World Wide Web Consortium">W3C</acronym> Editor's Draft 13 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> @@ -268,7 +268,8 @@ <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="altmethod">The <code>img</code> element <code>alt</code> attribute</h3> +<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> @@ -285,7 +286,7 @@ <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> -<h6 id="replacement">Is alt attribute content a replacement for an image?</h6> +<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> @@ -298,8 +299,7 @@ <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> -<h6 id="empty">Using an empty <code>alt</code> attribute <code>alt=""</code></h6> +<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> @@ -314,9 +314,9 @@ <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 text alternative be?</h6> +<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> -<h3 id="hf">The <code>figure</code> and <code>figcaption</code> elements</h3> +<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> @@ -343,43 +343,10 @@ <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>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> -<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> - <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> -</ul> -<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 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 id="hq">Text content within the same document or another document</h3> +<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> -<h3 id="hs">Text content next to or prior to an image </h3> +<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> @@ -394,7 +361,7 @@ <li>The presence of the image may not be reported to users.</li> </ul> -<h3 id="hv">The <code>img</code> element <code>title</code> attribute</h3> +<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> @@ -406,7 +373,7 @@ <li>The content of the title attribute is not available to users unless they can operate a mouse.</li> </ul> -<h3 id="hy">The <code>img</code> element <code>longdesc</code> attribute</h3> +<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> @@ -418,7 +385,57 @@ <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>
Received on Wednesday, 12 January 2011 16:28:16 UTC