- From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 09 May 2011 13:23:08 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/alt-techniques In directory hutz:/tmp/cvs-serv10872 Modified Files: Overview.html Log Message: fixed up error in figcaption example Index: Overview.html =================================================================== RCS file: /sources/public/html5/alt-techniques/Overview.html,v retrieving revision 1.67 retrieving revision 1.68 diff -u -d -r1.67 -r1.68 --- Overview.html 9 May 2011 13:13:33 -0000 1.67 +++ Overview.html 9 May 2011 13:23:06 -0000 1.68 @@ -745,7 +745,9 @@ <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><strong>Example Image in context: </strong></p> - <p><img src="images/home.gif" alt="A house icon next to the word 'home'." width="66" height="29"></p> + <div class="element"> + <p><img src="images/home.gif" alt="A house icon next to the word 'home'." width="66" height="29"></p> + </div> <p><strong>Example code 1 - inline image:</strong></p> <pre><a href="home.html"> @@ -1022,7 +1024,9 @@ <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> <div class="example"> <p><strong>Example Image:</strong></p> - <p><img src="images/captcha.gif" alt="captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted," width="270" height="60"></p> + <div class="element"> + <p><img src="images/captcha.gif" alt="captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted," width="270" height="60"></p> + </div> <p><strong>Example code:</strong> </p> <PRE><img src="captcha.png" <strong>alt="An audio challenge follows if you cannot view this image."</strong>> <!-- audio CAPTCHA option that allows the user to listen and type the word --> @@ -1039,7 +1043,9 @@ <h4 id="141">Example 14.1</h4> <div class="example"> <p><strong>Example:</strong></p> - <p><a href="http://dev.w3.org/html5/spec/spec.html"><img src="images/HTML5_Logo.png" width="128" height="128" alt="HTML5 specification"></a></p> + <div class="element"> + <p><a href="http://dev.w3.org/html5/spec/spec.html"><img src="images/HTML5_Logo.png" width="128" height="128" alt="HTML5 specification"></a></p> + </div> <p><strong>Example code:</strong></p> <pre><code><a href="http://dev.w3.org/html5/spec/spec.html"> <img src="HTML5_Logo.png" <strong>alt="HTML5 specification"</strong>></a></code></pre> @@ -1048,7 +1054,9 @@ <p>If the logo is being used to represent the entity, e.g. as a page heading, the <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute MUST contain the name of the entity being represented by the logo. The <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute SHOULD NOT contain text like the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity itself. </p> <div class="example"> <p><strong>Example:</strong></p> - <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr></p> + <div class="element"> + <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr></p> + </div> <p><strong>Example code:</strong></p> <pre><abbr title="World Wide Web Consortium"> <img src="images/w3c_home.png" <strong>alt="W3C"</strong>> @@ -1060,7 +1068,9 @@ <p>If the logo is being used next to the name of the what that it represents, then the logo is supplemental, and its <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute MUST instead be empty.</p> <div class="example"> <p><strong>Example:</strong></p> - <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr> W3C (World Wide Web Consortium)</p> + <div class="element"> + <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr> W3C (World Wide Web Consortium)</p> + </div> <p><strong>Example code:</strong></p> <pre> <p><img src="images/w3c_home.png" <strong>alt=""</strong>> @@ -1156,20 +1166,26 @@ <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> <div class="example"> - <p><strong>Example:</strong></p> - <p><img src="images/shadows.jpg" width="400" height="310" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp."></p> <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>Code examples:</strong>:</p> + <p><strong>Example A:</strong></p> + <div class="element"> + <p><img src="images/shadows.jpg" width="400" height="310" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp."></p> + </div> + <p><strong>Code example:</strong>:</p> <pre> <img src="example.jpg" <strong>alt="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>></pre> -<pre> -<figure> -<img src="example.jpg"> -<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. </strong></figcaption> -</figure> -</pre> +<p><strong>Example B: </strong></p> +<div class="element1"> + <p><img src="images/shadows.jpg" width="400" height="310"></p> + <p><code><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></code></p> + + + +</div> <p><strong>Code example:</strong></p> +<pre><code><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. </strong></figcaption> <br></figure> </code></pre> </div> <h5 id="hg">Advantages:</h5> <ul>
Received on Monday, 9 May 2011 13:23:14 UTC