- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 02 Dec 2011 16:50:32 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv5454
Modified Files:
Overview.html developer.html
Log Message:
added extra practical example for figure element and modified alt text of print preview icon
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.83
retrieving revision 1.84
diff -u -d -r1.83 -r1.84
--- Overview.html 29 Nov 2011 14:39:59 -0000 1.83
+++ Overview.html 2 Dec 2011 16:50:16 -0000 1.84
@@ -657,10 +657,25 @@
border: 1px dashed #FF0000;
background: #f5f5f5;
}
+.note1 {color: green; background: transparent; font-family: sans-serif; }
+.note1 { font-weight: bolder;
+ font-style: italic;
+ color: #900;
+ font-size: large;
+}
+.note1 {font-weight: bolder;
+ font-style: italic;
+ color: #900;
+ font-size: medium;
+ margin: 0.5em 0em 0em;
+ padding: 0.5em;
+ border: 1px dashed #FF0000;
+ background: #f5f5f5;
+}
</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 29 November 2011</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 02 December 2011</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>
@@ -762,10 +777,10 @@
<div class="example">
<p>In this example, a link contains a print preview icon. The link points to the a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.</p>
<p><strong>Example Rendering:</strong></p>
- <p><img src="images/preview.png" width="32" height="30" alt="print preview"></p>
+ <p><img src="images/preview.png" width="32" height="30" alt="Preview the printed page."></p>
<p><strong>Example code:</strong></p>
<pre>
-<a href="preview.html"><br><img src="images/preview.png" width="32" height="30" <strong>alt="Print preview."</strong>><br></a>
+<a href="preview.html"><br><img src="images/preview.png" width="32" height="30" <strong>alt="Preview the printed page."</strong>><br></a>
</pre>
</div>
@@ -1442,7 +1457,7 @@
</div>
<h5>Note:</h5>
-<p class="note"> In examples A & B above, the <code>alt </code>attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the <code>alt</code> attribute in this context is allowed as a bridging technique until the <code>figure</code> and <code>figcaption</code> element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
+<p class="note"> In examples A & B above, the <code>alt </code>attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the <code>alt</code> attribute in this context is recommended as a bridging technique until the <code>figure</code> and <code>figcaption</code> element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<div class="section" id="sec13">
<h3 id="captcha"><span class="secno">3.13 </span>CAPTCHA Images </h3>
@@ -1626,7 +1641,7 @@
</div> <p><strong>Code example:</strong></p>
-<pre><figure role="group"> <br><img src="shadows.jpg"> <br><figcaption><strong> Shadow like figures and a graffiti tag drawn on the walls of a
+<pre><figure> <br><img src="shadows.jpg"> <br><figcaption><strong> Shadow like figures and a graffiti tag drawn on the walls of a
partially demolished building, illuminated by the light from a street lamp (photo). </strong></figcaption> <br></figure></pre>
</div>
<h5 id="hg">Advantages:</h5>
@@ -1636,7 +1651,23 @@
<h5 id="hi">Disadvantages:</h5>
<ul>
<li>The <code>figure</code> and <code>figcaption</code> elements are not currently accessibility supported by browsers or assistive technology. </li>
-</ul>
+ </ul>
+
+<div class="example">
+ <p>Until the <code>figure</code> and <code>figcaption</code> elements are accessibility supported by browsers and/or assistive technology it is recommended that <code>role="group"</code> be used on the figure element and in the case where the <code>figcaption</code> content is the text alternative, provide a label for the image in the <code>alt</code> attribute. These recommendations are illustrated in following example:</p>
+ <p><strong>Example C: </strong></p>
+ <div class="element1">
+ <p><img src="images/shadows.jpg" width="400" height="310"></p>
+ <p><strong>Shadow like figures and a graffiti tag drawn on the walls of a
+ partially demolished building, illuminated by the light from a street lamp. </strong></p>
+ </div>
+ <p><strong>Code example:</strong></p>
+ <pre><figure <strong>role="group"</strong>> <br><img src="shadows.jpg" <strong>alt="photo 1"</strong>> <br><figcaption><strong></strong>Shadow like figures and a graffiti tag drawn on the walls of a
+ partially demolished building, illuminated by the light from a street lamp <strong>(photo 1). </strong><br></figcaption> <br></figure></pre>
+
+</div>
+ <h5>Note:</h5>
+ <p class="note1"> In example C above, the <code>alt </code>attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the <code>alt</code> attribute in this context is recommended as a bridging technique until the <code>figure</code> and <code>figcaption</code> element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<h4 id="nested">4.2.1 Using nested <code>figure</code> elements </h4>
<p>In cases where there is a group of related images each having an associated caption, it is recommended that nested <code>figure</code> and <code>figcaption</code> elements be used. </p>
Index: developer.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/developer.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- developer.html 29 Nov 2011 14:39:59 -0000 1.7
+++ developer.html 2 Dec 2011 16:50:30 -0000 1.8
@@ -664,13 +664,14 @@
</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 29 November 2011</h2><dl><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>Editor:</dt><dd><span>Steve Faulkner</span>, The Paciello Group <span class="ed_mailto"><a href="mailto:sfaulkner@paciellogroup.com">sfaulkner@paciellogroup.com</a></span> </dd>
+<h2 id="w3c-editor-s-draft-26-may-2011">W3C Editor's Draft 02 December 2011</h2><dl><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>Editor:</dt><dd><span>Steve Faulkner</span>, The Paciello Group <span class="ed_mailto"><a href="mailto:sfaulkner@paciellogroup.com">sfaulkner@paciellogroup.com</a></span> </dd>
</dl><p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p><hr></div>
+
<div id="abstract" class="introductory section"><!--OddPage--><h2><span class="secno">1. </span>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>
@@ -696,7 +697,7 @@
<div class="section" id="intro_alt">
<!--OddPage--><h2 id="intro"><span class="secno">2. </span>Introduction</h2>
<h3 id="text-alt">Text Alternatives</h3>
-<p><a href="http://www.w3.org/TR/WCAG20/#text-altdef">Text alternatives</a> are a primary way of making visual information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.</p>
+<p><a href="http://www.w3.org/TR/WCAG20/#text-altdef">Text alternatives</a> are a primary way of making visual information accessible, because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech.</p>
<p>To determine appropriate <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</a> it is important to think about why an image is being included in a document. What is its purpose? Thinking like this will help you to understand what is important about the image for the page's intended audience. Every image has a reason for being on a page, because it provides useful information, performs a function, or enhances aesthetics. Therefore, knowing what the image is for, makes writing appropriate <a href="http://www.w3.org/TR/WCAG20/#text-altdef">text alternatives</a> easier.</p>
<h3 id="example-benefits">Examples of scenarios where users benefit from text alternatives for images</h3>
<ul>
@@ -764,10 +765,10 @@
<div class="example">
<p>In this example, a link contains a print preview icon. The link points to the a version of the page with a print stylesheet applied. The text alternative is a brief description of the link target.</p>
<p><strong>Example Rendering:</strong></p>
- <p><img src="images/preview.png" width="32" height="30" alt="print preview"></p>
+ <p><img src="images/preview.png" width="32" height="30" alt="Preview the printed page."></p>
<p><strong>Example code:</strong></p>
<pre>
-<a href="preview.html"><br><img src="images/preview.png" width="32" height="30" <strong>alt="Print preview."</strong>><br></a>
+<a href="preview.html"><br><img src="images/preview.png" width="32" height="30" <strong>alt="Preview the printed page."</strong>><br></a>
</pre>
</div>
@@ -1444,7 +1445,7 @@
</div>
<h5>Note:</h5>
-<p class="note"> In examples A & B above, the <code>alt </code>attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the <code>alt</code> attribute in this context is allowed as a bridging technique until the <code>figure</code> and <code>figcaption</code> element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
+<p class="note"> In examples A & B above, the <code>alt </code>attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the <code>alt</code> attribute in this context is recommended as a bridging technique until the <code>figure</code> and <code>figcaption</code> element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<div class="section" id="sec13">
<h3 id="captcha"><span class="secno">3.13 </span>CAPTCHA Images </h3>
@@ -1628,7 +1629,7 @@
</div> <p><strong>Code example:</strong></p>
-<pre><figure role="group"> <br><img src="shadows.jpg"> <br><figcaption><strong> Shadow like figures and a graffiti tag drawn on the walls of a
+<pre><figure> <br><img src="shadows.jpg"> <br><figcaption><strong> Shadow like figures and a graffiti tag drawn on the walls of a
partially demolished building, illuminated by the light from a street lamp (photo). </strong></figcaption> <br></figure></pre>
</div>
<h5 id="hg">Advantages:</h5>
@@ -1638,7 +1639,23 @@
<h5 id="hi">Disadvantages:</h5>
<ul>
<li>The <code>figure</code> and <code>figcaption</code> elements are not currently accessibility supported by browsers or assistive technology. </li>
-</ul>
+ </ul>
+
+<div class="example">
+ <p>Until the <code>figure</code> and <code>figcaption</code> elements are accessibility supported by browsers and/or assistive technology it is recommended that <code>role="group"</code> be used on the figure element and in the case where the <code>figcaption</code> content is the text alternative, provide a label for the image in the <code>alt</code> attribute. These recommendations are illustrated in following example:</p>
+ <p><strong>Example C: </strong></p>
+ <div class="element1">
+ <p><img src="images/shadows.jpg" width="400" height="310"></p>
+ <p><strong>Shadow like figures and a graffiti tag drawn on the walls of a
+ partially demolished building, illuminated by the light from a street lamp. </strong></p>
+ </div>
+ <p><strong>Code example:</strong></p>
+ <pre><figure <strong>role="group"</strong>> <br><img src="shadows.jpg" <strong>alt="photo 1"</strong>> <br><figcaption><strong></strong>Shadow like figures and a graffiti tag drawn on the walls of a
+ partially demolished building, illuminated by the light from a street lamp <strong>(photo 1). </strong><br></figcaption> <br></figure></pre>
+
+</div>
+ <h5>Note:</h5>
+ <p class="note1"> In example C above, the <code>alt </code>attribute is be used a a container for a text label that identifies the image and provides an implicit association between the image and the text that describes it. The use of the <code>alt</code> attribute in this context is recommended as a bridging technique until the <code>figure</code> and <code>figcaption</code> element semantics are implemented in browsers and assistive technology. Its use conforms to WCAG 2.0 [<a href="#bib-WCAG20">WCAG20</a>]. Its use is a willful violation of <a href="#bib-HTML5">HTML5</a> [HTML5].</p>
</div>
<h4 id="nested">4.2.1 Using nested <code>figure</code> elements </h4>
<p>In cases where there is a group of related images each having an associated caption, it is recommended that nested <code>figure</code> and <code>figcaption</code> elements be used. </p>
Received on Friday, 2 December 2011 16:50:40 UTC