- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 05 Oct 2012 09:11:26 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv26360
Modified Files:
Overview.html
Log Message:
updated for WD
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.110
retrieving revision 1.111
diff -u -d -r1.110 -r1.111
--- Overview.html 2 Jul 2012 13:17:40 -0000 1.110
+++ Overview.html 5 Oct 2012 09:11:23 -0000 1.111
@@ -733,7 +733,7 @@
</style>
</head>
<body style="display: inherit;"><div class="head"><p><a href="http://www.w3.org/"><img src="http://www.w3.org/Icons/w3c_home" alt="W3C" width="72" height="48"></a></p><h1 class="title" id="title">HTML5: Techniques for providing useful text alternatives</h1>
-<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 02 July 2012</h2><dl><dt>This version:</dt><dd><a href="http://dev.w3.org/html5/alt-techniques/">http://dev.w3.org/html5/alt-techniques/</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>
+<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 05 October 2012</h2><dl><dt>This version:</dt><dd><a href="http://dev.w3.org/html5/alt-techniques/">http://dev.w3.org/html5/alt-techniques/</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>
<dt>Developer edition:</dt>
<dd><a href="http://dev.w3.org/html5/alt-techniques/developer.html">http://dev.w3.org/html5/alt-techniques/developer.html</a> </dd>
<!-- <h2 id="w3c-working-draft-29-march-2012">W3C Working Draft 29 March 2012</h2>
@@ -759,7 +759,7 @@
<div id="abstract" class="introductory section"><!--OddPage--><h2>Abstract</h2>
-<p>This document contains author conformance requirements for use of the alt attribute in HTML5 and best practice guidance for authors of HTML documents on providing text alternatives for images. </p>
+<p>This document contains author conformance requirements for use of the <code>alt</code> attribute in HTML5 and best practice guidance for authors of HTML documents on providing text alternatives for images. </p>
<p>This specification is an extension to the HTML5 specification [<cite><a href="#bib-HTML5" rel="biblioentry" class="bibref">HTML5</a></cite>]. All normative
content in the HTML5 specification, unless specifically overridden by this
specification, is intended to be the basis for this specification.</p>
@@ -796,7 +796,7 @@
<ul class="toc">
<li class="tocline"><a class="tocxref" href="#abstract"><span class="secno">1. </span>Abstract</a></li>
<li class="tocline"><a class="tocxref" href="#intro_alt"><span class="secno">2. </span>Introduction</a>
- <ul class="toc"><li class="tocline"><a href="#tree" class="tocxref"><span class="secno">2.1 </span>A simple alt text decision tree</a></li>
+ <ul class="toc"><li class="tocline"><a href="#tree" class="tocxref"><span class="secno">2.1 </span>A simple <code>alt</code> text decision tree</a></li>
<li class="tocline"><a class="tocxref" href="#conformance"><span class="secno">2.2 </span>Conformance</a></li>
</ul>
<li class="tocline"><a class="tocxref" href="#recommendations"><span class="secno">3. </span>Requirements and Recommendations:</a>
@@ -822,7 +822,7 @@
<ul class="toc">
<li class="tocline"><a class="tocxref" href="#secm1"><span class="secno">4.1 </span>The <code>img</code> element <code>alt</code> attribute</a>
<ul class="toc">
- <li class="tocline"><a class="tocxref" href="#secm2"><span class="secno">4.1.1 </span>Is alt attribute content a replacement for an image?</a></li>
+ <li class="tocline"><a class="tocxref" href="#secm2"><span class="secno">4.1.1 </span>Is <code>alt</code> attribute content a replacement for an image?</a></li>
<li class="tocline"><a class="tocxref" href="#secm3"><span class="secno">4.1.2 </span>Using an empty <code>alt</code> attribute <code>alt=""</code></a></li>
<li class="tocline"><a class="tocxref" href="#m5"><span class="secno">4.1.3 </span>How long should a text alternative be?</a></li>
</ul>
@@ -871,11 +871,11 @@
<li>Provide the same informational <a href="http://www.w3.org/TR/WCAG20/#contentdef">content</a> as the image. </li>
<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>
<li>Be succinct as possible while still conveying equivalent values. Short text that describes its purpose or gives an overview will often suffice. </li>
- <li>Write suitable alt text according to context. The same image in a different situation may need very different alt text. </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>
+ <li>Write suitable <code>alt</code> text according to context. The same image in a different situation may need very different <code>alt</code> text. </li>
+ <li>Avoid redundant <code>alt</code> text. An example of this would be repeating the same text in your document, as well as in the <code>alt</code> attribute, and is unnecessary. </li>
</ul>
- <h3 id="tree"><span class="secno">2.1 </span>A simple alt text decision tree</h3>
- <p>A simple <em>informative</em> process for deciding if and what an alt text should be:</p>
+ <h3 id="tree"><span class="secno">2.1 </span>A simple <code>alt</code> text decision tree</h3>
+ <p>A simple <em>informative</em> process for deciding if and what an <code>alt</code> text should be:</p>
<ul>
<LI>Is this image the <a href="#sec1">only content of a link or form control</a>?
<UL>
@@ -898,7 +898,7 @@
<UL>
<LI><STRONG>Yes, </STRONG>and it’s a <a href="#sec6">simple graphic</a> or <a href="#sec9">photograph</a>: the <code>alt</code> attribute should briefly describe the image in a way that conveys that meaning.</LI>
<LI><STRONG>Yes</STRONG>, and it’s a <a href="#sec2">graph or complex piece of information</a>: include the information contained in the image elsewhere on the page.</LI>
- <LI><strong>Yes</strong>, but a suitable alt text is unknown at the time of publication (for example on a photo upload site): <a href="#sec12">provide a caption for the image</a>.</LI>
+ <LI><strong>Yes</strong>, but a suitable <code>alt</code> text is unknown at the time of publication (for example on a photo upload site): <a href="#sec12">provide a caption for the image</a>.</LI>
<LI><STRONG>No</STRONG>: Continue on!. </LI>
</UL>
</LI>
@@ -907,7 +907,7 @@
<LI>Use an <a href="#secm3">empty</a> <code>alt</code> attribute.</LI>
</UL>
</LI>
- <li>Image use not listed above or unsure about what alt text to provide?
+ <li>Image use not listed above or unsure about what <code>alt</code> text to provide?
<ul>
<li>This decision tree <strong>does not</strong> cover all cases, for detailed information on the provision of text alternatives refer to the <a href="#recommendations">requirements and recommendations</a> below.</li>
</ul>
@@ -936,7 +936,7 @@
<p>In this example, a user is asked to pick her preferred color
from a list of three. Each color is given by an image, but for
users who cannot view the images,
- the color names are included within the alt attributes of the images:</p>
+ the color names are included within the <code>alt</code> attributes of the images:</p>
<p><strong>Example Rendering:</strong></p>
<p><img src="images/buttons.gif" alt="The example HTML code as displayed in a browser. 3 links each containing a rectangular image: 1 is blue with the text 'blue', 2 red with the text 'red' and 3 is green with the text 'green'." width="274" height="45"></p>
<p><strong>Example code:</strong></p>
@@ -977,7 +977,7 @@
<div class="section" id="sec2">
<h3 id="graphical-representations"><span class="secno">3.2 </span>Graphical representations: charts, diagrams, graphs, maps, illustrations</h3>
<p>The full text alternative <em title="may" class="rfc2119">may</em> be provided in the <code>alt</code> attribute, or a shorter text alternative <em title="may" class="rfc2119">may</em> be provided in the <code>alt</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
+ <p>It is important to understand that a text alternative provided in the <code>alt</code> attribute is a <em>replacement</em> for the image, while a short text alternative in the <code>alt</code> 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 class="note1">While all the examples below can be considered for use, each method has advantages and disadvantages (refer to section <a href="#altmethod">4. Methods for Providing Text Alternatives</a>) .</p>
<h4 id="hae">Example 2.1</h4>
@@ -994,7 +994,7 @@
</div>
<h4 id="ex22">Example 2.2</h4>
<div class="example">
- <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description, within the same document, of the process represented in the flowchart. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
+ <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the <code>alt</code> attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to a description, within the same document, of the process represented in the flowchart. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
<p><strong>Example Code:</strong><br>
</p>
<pre><p><strong><a href="#d1" title="Flowchart description."></strong><img src="flowchart.gif" <strong>alt="Broken lamp flowchart description."</strong>><strong></a></strong></p>
@@ -1013,7 +1013,7 @@
</div>
<h4 id="haee">Example 2.3</h4>
<div class="example">
- <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used on the containing <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its description:</p>
+ <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the <code>alt</code> attribute and a longer text alternative in text, <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used on the containing <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its description:</p>
<p><strong>Example Code:</strong><br>
</p>
<pre><figure <strong>role="group"</strong>>
@@ -1026,7 +1026,7 @@
</div>
<h4 id="hag">Example 2.4</h4>
<div class="example">
- <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text, programmatically associated using <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the containing <code>figure</code> element. </p>
+ <p>Here's another example of the same <a href="#flowchart">flowchart</a> image, showing a short text alternative included in the <code>alt</code> attribute and a longer text alternative in text, programmatically associated using <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the containing <code>figure</code> element. </p>
<p><strong>Note:</strong> The longer text alternative is structured using an ordered list.</p>
<p><strong>Example Image in context:</strong></p>
<div class="element1">
@@ -1158,7 +1158,7 @@
</div>
<h4 id="hao">Example 4.2</h4>
<div class="example">
- <p>Here's another example of the same <a href="#piechart">pie chart</a> image, showing a short text alternative included in the alt attribute and a longer text alternative in text. <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used to add usable semantics to the figure element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its text alternative:</p>
+ <p>Here's another example of the same <a href="#piechart">pie chart</a> image, showing a short text alternative included in the <code>alt</code> attribute and a longer text alternative in text. <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used to add usable semantics to the figure element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its text alternative:</p>
<p><strong>Example code:</strong></p>
<pre><figure <strong>role="group"</strong>>
<img src="figure1.gif" <strong>alt="Figure 1"</strong><strong></strong>>
@@ -1173,10 +1173,10 @@
<div class="section" id="sec5">
<h3 id="decorative"><span class="secno">3.5 </span>A purely decorative image that doesn't add any information</h3>
<p><a href="http://www.w3.org/TR/WCAG20/#puredecdef">Purely decorative</a> images are visual enhancements, decorations or embellishments that provide no function or information beyond aesthetics to users who can view the images. They have no meaning in themselves and do not provide page <a href="http://www.w3.org/TR/WCAG20/#contentdef">content</a>.</p>
- <p>Purely decorative images <em title="must" class="rfc2119">must</em> 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 <em title="must" class="rfc2119">must</em> be empty.</p>
+ <p>Purely decorative images <em title="must" class="rfc2119">must</em> be marked up so they can be ignored by <a href="http://www.w3.org/TR/WCAG20/#atdef">assistive technology</a> with a null <code>alt</code> 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 <code>alt</code> attribute <em title="must" class="rfc2119">must</em> be empty.</p>
<h4 id="har">Example 5.1</h4>
<div class="example">
- <p>Here's an example of an image being used as a decorative banner for a person's blog, the image offers no information and so should have an empty alt attribute. While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.</p>
+ <p>Here's an example of an image being used as a decorative banner for a person's blog, the image offers no information and so should have an empty <code>alt</code> attribute. While it is not unacceptable to include decorative images inline, it is recommended if they are purely decorative to include the image using CSS.</p>
<p><strong>Example image in context:</strong></p>
<div class="element1">
<p><img src="images/border.gif" alt="" width="400" height="30"></p>
@@ -1191,7 +1191,7 @@
</div>
<h4 id="has">Related techniques and resources</h4>
<ul>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null alt text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null <code>alt</code> text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
<li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/C9.html">Using CSS to include decorative images (CSS)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
<li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F38.html">Failure: Omitting the alt-attribute for non-text content used for decorative purposes only in HTML</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
<li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/F39.html">Failure: Providing a text alternative that is not null. (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
@@ -1231,7 +1231,7 @@
<h4 id="hau">Example 6.2</h4>
<div class="example">
<p>It is not always easy to write a useful text alternative for an image, another option is to provide a link to a description or further information about the image. </p>
- <p>In this example of the same image, there is a short text alternative included in the alt attribute, and there is a link after the image. The link points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. </p>
+ <p>In this example of the same image, there is a short text alternative included in the <code>alt</code> attribute, and there is a link after the image. The link points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. </p>
<p><strong>Example image in context: </strong></p>
<div class="element1">
<p><strong>The Lady of Shalott</strong><br>
@@ -1249,7 +1249,7 @@
<!-- <h4>Example 6.3</h4>
<div class="example">
<p>In this example of the same image a visible text caption is provided using the <figure> and <figcaption> elements.</p>
- <p>In this example of the same image, there is a short text alternative included in the alt attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
+ <p>In this example of the same image, there is a short text alternative included in the <code>alt</code> attribute, in this case the text alternative is a description of the link target as the image is the sole content of a link. The link points to points to a page containing <a href="http://www.tate.org.uk/servlet/ViewWork?cgroupid=-1&workid=15984">information about the painting</a>. Note a title has been included on the link for sighted mouse users, the title provides information about the link target.</p>
<p><strong>Example code: </strong></p>
<pre>
<h1>The Lady of Shalott</h1>
@@ -1264,7 +1264,7 @@
</pre>
</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 is that both the image an the text is included as content of the link. </p>
+ <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 is that both the image and the text is included 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 the <code>p</code> element. The example below makes use of this change.</p>
<div class="example">
<p><strong>Example image in context: </strong></p>
@@ -1288,7 +1288,7 @@
</div>
<h4 id="haw">Example 6.4</h4>
<div class="example">
- <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty alt attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming, but it is recommended that a brief text alternative is provided. </p>
+ <p>Here is another example of the same image used in a different context. In this case it is used to add a bit of medieval themed decoration to an advertisement. As the image bears no direct relation to the content of the page it is considered appropriate to use an empty <code>alt</code> attribute. It can also be considered appropriate to provide a brief description of the image as some users who cannot view images appreciate having information provided about images of paintings and photographs regardless of the context in which the images are used. As decisions about when to provide a text alternative are based on context of use, both options are considered to be conforming, but it is recommended that a brief text alternative is provided. </p>
<p><strong>Example A Image in context: </strong></p>
<div class="element1">
<p><b>Medieval Nights</b></p>
@@ -1338,7 +1338,7 @@
be set to zero.</p>
<h4 id="hay">Example 7.1</h4>
<div class="example">
- <p>An example of an img element used to collect web page statistics. The alt attribute is empty.</p>
+ <p>An example of an img element used to collect web page statistics. The <code>alt</code> attribute is empty.</p>
<p><strong>Example code:</strong></p>
<pre><p><img src="http://server3.web-stat.com/count.pl?octafish.com"
width="0" height="0" <strong>alt=""</strong>></p>
@@ -1347,7 +1347,7 @@
</div>
<h4 id="haz">Related techniques and resources</h4>
<ul>
- <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null alt text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
+ <li><a href="http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20071211/H67.html">Using null <code>alt</code> text and no title attribute on img elements for images that AT should ignore (HTML)</a> [<cite><a href="#bib-WCAG20-TECHS" rel="biblioentry" class="bibref">WCAG20-TECHS</a></cite>]</li>
</ul>
</div>
<div class="section" id="sec8">
@@ -1357,7 +1357,7 @@
<p>In other cases the icon adds emphasis to text content that needs to be conveyed textually, In such cases a text alternative <em title="must" class="rfc2119">must</em> be provided.</p>
<h4 id="hba">Example 8.1</h4>
<div class="example">
- <p>In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text "home". The image has an empty alt text. Where images are used in this way, it is also be appropriate to add the image using CSS. </p>
+ <p>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 <code>alt</code> text. Where images are used in this way, it would also appropriate to add the image using CSS. </p>
<p><strong>Example Image in context: </strong></p>
<div class="element1">
<p><img src="images/home.gif" alt="A house icon next to the word 'home'." width="66" height="29"></p>
@@ -1408,9 +1408,9 @@
<div class="section" id="sec9">
<h3 id="pictures"><span class="secno">3.9 </span>Images of Pictures</h3>
<p>Images of pictures or graphics include visual representations of objects, people, scenes, abstractions, etc. This <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a> can convey a significant amount of information visually or provide a <a href="http://www.w3.org/TR/WCAG20/#sensoryexpdef">specific sensory experience</a> to a sighted person. Examples include photographs, paintings, drawings and artwork.</p>
- <p>An appropriate text alternative for a picture is a brief description, or <a href="http://www.w3.org/TR/WCAG20/#namedef">name</a>. As in all text alternative authoring decisions, writing suitable text alternatives for pictures requires human judgment. The text value is subjective to the context where the image is used and the page author's writing style. Therefore, there is no single 'right' or 'correct' piece of alt text for any particular image. In addition to providing a short <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternative</a> that gives a brief description of the <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a>, also providing <a href="http://www.w3.org/TR/WCAG20/#suppcontentdef">supplemental content</a> through another means when appropriate may be useful.</p>
+ <p>An appropriate text alternative for a picture is a brief description, or <a href="http://www.w3.org/TR/WCAG20/#namedef">name</a>. As in all text alternative authoring decisions, writing suitable text alternatives for pictures requires human judgment. The text value is subjective to the context where the image is used and the page author's writing style. Therefore, there is no single 'right' or 'correct' piece of <code>alt</code> text for any particular image. In addition to providing a short <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternative</a> that gives a brief description of the <a href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a>, also providing <a href="http://www.w3.org/TR/WCAG20/#suppcontentdef">supplemental content</a> through another means when appropriate may be useful.</p>
<h4 id="hbe">Example 9.1</h4>
- <p>This example shows an image uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath. The image has a text alternative provided using the <code>img</code> elements <code>alt</code> attribute. It also has an caption provided by including the <code>img</code> element in a <code>figure</code> element and using a <code>figcaption</code> element to identify the caption text. The text alternative in Example code 2 includes information "photo" about the type of image, although this is not generally recommended, authors <em title="may" class="rfc2119">may</em> include such information in the <code>alt</code> attribute content.</p>
+ <p>This example shows an image uploaded to a photo-sharing site. The photo is of a cat, sitting in the bath. The image has a text alternative provided using the <code>img</code> element's <code>alt</code> attribute. It also has an caption provided by including the <code>img</code> element in a <code>figure</code> element and using a <code>figcaption</code> element to identify the caption text. The text alternative in Example code 2 includes information "photo" about the type of image. Although this is not generally recommended, authors <em title="may" class="rfc2119">may</em> include such information in the <code>alt</code> attribute content.</p>
<div class="example">
<p><strong>Example image in context:</strong></p>
<div class="element1">
@@ -1455,11 +1455,11 @@
<p>Webcam images are static images that are automatically updated periodically. Typically the images are from a fixed viewpoint, the images may update on the page automatically as each new image is uploaded from the camera or the user may be required to refresh the page to view an updated image. Examples include traffic and weather cameras.</p>
<h4 id="hbgg">Example 10.1</h4>
<p>This example is fairly typical; the title and a time stamp are included in the image, automatically generated by the webcam software. It would be better if the text information was not included in the image, but as it is part of the image, it is required that it is provided as a text alternative. A caption is also provided using the <code>figure</code> and <code>figcaption</code> elements. As the image is provided to give a visual indication of the current weather near Sopwith House, a link to a local weather forecast is provided, as with automatically generated and uploaded webcam images it may be impractical to provide such information as a text alternative. </p>
- <p>The text of the alt attribute includes a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software. The text alternative also includes a description of some aspects of what can be seen in the image which are unchanging, although weather conditions and time of day change. </p>
+ <p>The text of the <code>alt</code> attribute includes a prose version of the timestamp, designed to make the text more understandable when announced by text to speech software. The text alternative also includes a description of some aspects of what can be seen in the image which are unchanging, although weather conditions and time of day change. </p>
<p><strong>Note: </strong></p>
<ul>
<li><a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> is used to add usable semantics to the figure element which also provides a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</li>
- <li>The timestamp information in the text alternative will need to be updated each time the image is updated, this can be easily be achieved using scripting on the server or client side.</li>
+ <li>The timestamp information in the text alternative will need to be updated each time the image is updated. This can be easily be achieved using scripting on the server or client side.</li>
</ul>
<p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith House, looking north.</p>
<div class="example">
@@ -1483,7 +1483,7 @@
latest weather details</a> for Kingston upon Thames.</p> </pre>
</div>
<h4 id="hbh">Example 10.2</h4>
- <p>This example is the same as Example 10.1 except the descriptive part of the text alternative is not in the alt attribute, it is in a paragraph associated with the image using <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
+ <p>This example is the same as Example 10.1 except the descriptive part of the text alternative is not in the <code>alt</code> attribute, it is in a paragraph associated with the image using <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
<p>"View from the top of Sopwith house, looking towards north Kingston. In the foreground of the image are the safety rails on the flat part of the roof.
Nearby there are low rise industrial buildings, beyond are blocks of flats.
In the distance there's a church steeple."</p>
@@ -1507,7 +1507,7 @@
latest weather details</a> for Kingston upon Thames.</p> </pre>
</div>
<h4 id="hbi">Example 10.3</h4>
- <p>The previous webcam examples rely upon the correct time and and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided the first includes the description as part of the alt attribute content the second includes it as part of the longer text alternative below the image. Both examples use <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
+ <p>The previous webcam examples rely upon the correct time and date information being inserted via scripting each time the image is updated. If this is not possible, the text alternative should instead include a brief description of the text information that changes each time the image is updated. 2 versions are provided; the first includes the description as part of the <code>alt</code> attribute content; the second includes it as part of the longer text alternative below the image. Both examples use <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
<p>Context: A webcam image updated every hour, with a viewpoint from the top of Sopwith house, looking north.</p>
<div class="example">
<p><strong>Image example in context:</strong></p>
@@ -1542,7 +1542,7 @@
</div>
<div class="section" id="sec11">
<h3 id="imgslices"><span class="secno">3.11 </span>A group of images that form a single larger picture</h3>
- <p>When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, one of the images <em title="must" class="rfc2119">must</em> have its alt attribute set as per the relevant rules that would be appropriate for the picture as a whole, and then all the remaining images <em title="must" class="rfc2119">must</em> have an empty alt attribute.</p>
+ <p>When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, one of the images <em title="must" class="rfc2119">must</em> have its <code>alt</code> attribute set as per the relevant rules that would be appropriate for the picture as a whole, and then all the remaining images <em title="must" class="rfc2119">must</em> have an empty <code>alt</code> attribute.</p>
<h4 id="hbii">Example 11.1</h4>
<div class="example">
<p>In this example, a picture representing a company logo for the <span title="">PIP Corporation</span> has been split into two pieces, the first containing the letters "PIP" and the second with the word "CO". The alternative text ("PIP CO") is all in the first image.</p>
@@ -1590,10 +1590,10 @@
</div>
<div class="section" id="sec12">
<h3 id="unknown"><span class="secno">3.12 </span> When a text alternative is unknown at the time of publication</h3>
- <p>In some cases an image may be included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum conformance requirement is to provide a caption for the image. The caption <em title="must" class="rfc2119">must</em> be provided using the <code>figcaption</code> element and the <code>alt</code> attribute. The use of <code>figcaption</code> is recommended over the use of the <code>alt</code> attribute as the <code>figcaption</code> element is designed as a container for caption text, while the alt attribute is designed as a container for a text alternative. In practice the <code>alt</code> attribute has and will continue to provide a more generic method for providing information about an image until such times that the <code>figcaption</code> element is well supported in browsers and assistive technologies.</p>
+ <p>In some cases an image may be included in a published document, but the author is unable to provide an appropriate text alternative. In such cases the minimum conformance requirement is to provide a caption for the image. The caption <em title="must" class="rfc2119">must</em> be provided using the <code>figcaption</code> element and the <code>alt</code> attribute. The use of <code>figcaption</code> is recommended over the use of the <code>alt</code> attribute as the <code>figcaption</code> element is designed as a container for caption text, while the <code>alt</code> attribute is designed as a container for a text alternative. In practice the <code>alt</code> attribute has and will continue to provide a more generic method for providing information about an image until such times that the <code>figcaption</code> element is well supported in browsers and assistive technologies.</p>
<h4 id="hbii2">Example 12.1</h4>
<div class="example">
- <p>In example A, a person uploads a photo to a photo sharing site, the alt attribute content identifies the image "photo 1" while the caption provides the image file name. Neither the alt or the caption provide an edequate text alternative for the image, but the image is identified and implicitly associated with the caption via the term "photo1". In example B, the caption has been updated to provide a caption that can also serve as a text alternative. Both examples use <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
+ <p>In example A, a person uploads a photo to a photo sharing site, the <code>alt</code> attribute content identifies the image "photo 1" while the caption provides the image file name. Neither the <code>alt</code> nor the caption provide an adequate text alternative for the image, but the image is identified and implicitly associated with the caption via the term "photo1". In example B, the caption has been updated to provide a caption that can also serve as a text alternative. Both examples use <a href="http://www.w3.org/TR/wai-aria/roles#group"><code>role="group"</code></a> on the <code>figure</code> element to provide a <a href="http://www.w3.org/TR/WCAG20/#programmaticallydetermineddef">programmatically determinable</a> relationship between the image and its caption.</p>
<p><strong>Examples of an image in context:</strong></p>
<h5 id="example-a">Example A:</h5>
<p class="warning5">The caption text in Example A is not a suitable text alternative and is not conforming to the Web Accessibility Guidelines 2.0. <span>[<cite><a href="#bib-WCAG20" rel="biblioentry" class="bibref">WCAG20</a></cite>]</span></p>
@@ -1629,7 +1629,7 @@
<p>Provide <a title="http://www.w3.org/TR/WCAG20/#text-altdef" href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</a> that identify and describe the purpose of the <a title="http://www.w3.org/TR/WCAG20/#non-text-contentdef" href="http://www.w3.org/TR/WCAG20/#non-text-contentdef">non-text content</a>, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception. For instance provide an audio alternative along with the visual image. Locate the audio option right next to the visual one. This helps but is still problematic for people without sound cards, the deaf-blind, and some low hearing people. Another method is to include a form that asks a question along with the visual image. This helps but is can be problematic for people with cognitive impairments. </p>
<p><span class="warning5">It is strongly recommended that alternatives to CAPTCHA be used, as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. Further information is available in the W3C's <a href="http://www.w3.org/TR/turingtest/">Inaccessibility of CAPTCHA</a>.</span></p>
<h4 id="hbl">Example 13.1</h4>
- <p>This example shows a <a href="http://recaptcha.net/learnmore.html">CAPTCHA test</a> which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content. </p>
+ <p>This example shows a <a href="http://recaptcha.net/learnmore.html">CAPTCHA test</a> which uses a distorted image of text. The text alternative in the <code>alt</code> attribute provides instructions for a user in the case where she cannot access the image content. </p>
<div class="example">
<p><strong>Example Image:</strong></p>
<div class="element1">
@@ -1687,7 +1687,7 @@
<h4 id="144">Example 14.4</h4>
<p>If the logo is used alongside text discussing the subject or entity the logo represents, then
<!--If the logo is actually being discussed, then it is being used as a phrase or paragraph (the description of the logo) with an alternative graphical representation (the logo itself), and the first entry above applies.-->
- the logo should have a text alternative, its identification as a logo may be included in the text alternative.</p>
+ the logo should have a text alternative, and its identification as a logo may be included in the text alternative.</p>
<div class="example">
<p><strong>Example:</strong></p>
<div class="element1">
@@ -1731,35 +1731,35 @@
<h3 id="native">Native HTML methods</h3>
<div class="section" id="secm1">
<h3 id="altmethod"><span class="secno">4.1 </span>The <code>img</code> element <code>alt</code> attribute</h3>
- <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>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 <code>alt</code> 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 <code>alt</code> attribute content. Text based browsers may display the <code>alt</code> 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="text alternative."</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>
+ <li>Inclusion of text alternatives as <code>alt</code> 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>
+ <li>Content of the <code>alt</code> attribute is not available to some users who may find it useful.</li>
+ <li>If the <code>alt</code> attribute content is too long it may cause display issues in some browsers.</li>
+ <li>If the <code>alt</code> attribute content is too long it may cause reading issues in some assistive technologies.</li>
+ <li>Semantic structure cannot be added to <code>alt</code> attribute content.</li>
</ul>
<div class="section" id="secm2">
- <h4 id="replacement"><span class="secno">4.1.1 </span>Is alt attribute content a replacement for an image?</h4>
+ <h4 id="replacement"><span class="secno">4.1.1 </span>Is <code>alt</code> attribute content a replacement for an image?</h4>
<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 <em title="may" class="rfc2119">may</em> be a brief description that identifies the image. This <em title="should" class="rfc2119">should</em> 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 <em title="should" class="rfc2119">should</em> be a label for the image. This label <em title="may" class="rfc2119">may</em> be a brief description that identifies the image. This <em title="should" class="rfc2119">should</em> 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 <em title="should" class="rfc2119">should</em> 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 <em title="should" class="rfc2119">should</em> 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 <em title="should" class="rfc2119">should</em> 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 <em title="should" class="rfc2119">should</em> be considered as an indication that the image can be safely ignored.</li>
- <li>When an image is the sole content of a link, the alt attribute content <em title="should" class="rfc2119">should</em> be a brief description of the link target. Refer to <a href="#hba">Example 1.1</a>.</li>
+ <li>When an image contains too much information to use the <code>alt</code> attribute as a container for a text alternative the <code>alt</code> attribute content can be a label for the image. This label <em title="may" class="rfc2119">may</em> be a brief description that identifies the image. This <em title="should" class="rfc2119">should</em> 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 <code>alt</code> attribute as a container for a text alternative the <code>alt</code> attribute content <em title="should" class="rfc2119">should</em> be a label for the image. This label <em title="may" class="rfc2119">may</em> be a brief description that identifies the image. This <em title="should" class="rfc2119">should</em> 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 that the purpose of the using an image of text is to achieve a visual style, the <code>alt</code> attribute content <em title="should" class="rfc2119">should</em> 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 <code>alt</code> attribute <em title="should" class="rfc2119">should</em> 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 <code>alt</code> attribute <em title="should" class="rfc2119">should</em> 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 <code>alt</code> attribute <em title="should" class="rfc2119">should</em> be considered as an indication that the image can be safely ignored.</li>
+ <li>When an image is the sole content of a link, the <code>alt</code> attribute content <em title="should" class="rfc2119">should</em> 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 <em title="should" class="rfc2119">should</em> 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 <em title="may" class="rfc2119">may</em> 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 <em title="should" class="rfc2119">should</em> be a brief description of the link target. <a href="#hav">Refer to Example 6.3</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 <em title="may" class="rfc2119">may</em> be empty or a text alternative for the image. If the text content is not a description of the link target, the <code>alt</code> attribute content <em title="should" class="rfc2119">should</em> be a brief description of the link target. <a href="#hav">Refer to Example 6.3</a>.</li>
</ul>
</div>
<div class="section" id="secm3">
@@ -1774,19 +1774,19 @@
</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>
+ <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 <code>alt</code> 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 <code>alt</code> 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 <code>alt</code> 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 <code>alt</code> attribute on the image effectively precludes the assigning of a programmatic association.</li>
</ul>
</div>
<div class="section" id="m5">
<h4 id="he"><span class="secno">4.1.3 </span>How long should a text alternative be?</h4>
- <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 or the <code>figcaption</code> element, 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 or the <code>figcaption</code> element (in the case where it provides a text alternative for an image). </p>
+ <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> element's <code>alt</code> attribute or the <code>figcaption</code> element, 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 or the <code>figcaption</code> element (in the case where it provides a text alternative for an image). </p>
</div>
</div>
<div class="section" id="m6">
<h3 id="hf"><span class="secno">4.2 </span>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>The <code>figure</code> and <code>figcaption</code> elements provide a method to explicitly associate a caption 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 <code>alt</code> attribute:</p>
<div class="example">
<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 A:</strong></p>
@@ -1868,9 +1868,7 @@
<p><a href="http://www.paciellogroup.com/blog/2011/11/html5-accessibility-chops-using-nested-figure-elements/" rel="bookmark">HTML5 Accessibility Chops: using nested figure elements</a></p>
<div class="section" id="secm7">
<h3 id="hv"><span class="secno">4.3 </span>The <code>img</code> element <code>title</code> attribute</h3>
- <p>The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a text alternative for an image. The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a caption for an image, use the <code>figure</code> and <code>figcaption</code> elements to provide a caption, as described above.</p>
- <h5 id="note5">Note:</h5>
- <p class="note1">The use of title attribute to markup content that is intended to be available to all users is forbidden, because its use in this context results in content being hidden from keyboard only and touch device users and less usable/unusable for users with cognitive, fine motor skill or vision impairments. This is a willful violation of <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#guidance-for-conformance-checkers">HTML Living Standard</a>, which allows use of the title attribute as a caption for an image despite its known issues.</p>
+ <p>The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a text alternative for an image. The <code>title</code> attribute <em title="must not" class="rfc2119">must not</em> be used to provide a caption for an image; use the <code>figure</code> and <code>figcaption</code> elements to provide a caption, as described above.</p>
</div>
</div>
<h5 id="further2">Further Information </h5>
@@ -1901,8 +1899,8 @@
<h3 id="hbs">non-text content </h3>
<p>Any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language </p>
<p>Note: This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text. </p>
- <h3 id="hbt">Empty alt attribute or null alt attribute.</h3>
- <p>An alt attribute with no content:</p>
+ <h3 id="hbt">Empty <code>alt</code> attribute or null <code>alt</code> attribute.</h3>
+ <p>An <code>alt</code> attribute with no content:</p>
<div class="example">
<pre><img src="null.gif" <strong>alt=""</strong>></pre>
</div>
@@ -1924,7 +1922,7 @@
<!--OddPage-->
<h2 id="acknowledgements"><span class="secno">6. </span>Acknowledgements</h2>
<p class="note1">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. Joe Dolson (for the <a href="#tree">alt text decison tree</a>)</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. Joe Dolson (for the <a href="#tree">alt text decision tree</a>)</p>
<h3 id="funders"> Enabling funders</h3>
<p>The development of this publication is being funded in part by <a href="http://www.paciellogroup.com">The Paciello Group</a>. The content of this publication does not necessarily reflect the views or policies of The Paciello Group, nor does mention of trade names, commercial products, or organizations imply endorsement by The Paciello Group. </p>
</div>
Received on Friday, 5 October 2012 09:11:29 UTC