Merge pull request #236 from ResponsiveImagesCG/issue-220

Ref. #220 - Fixes missing `alt` attribute.

index.bs

@@ -235,8 +235,8 @@ Examples of usage</h3>
 		For example, say your site had three basic layouts:
 
 		<figure>
-			<img src="images/viewport_selection_mob_first.jpg">
-			<figcaption>
+			<img src="images/viewport_selection_mob_first.jpg" aria-describedby="viewport-selection" >
+			<figcaption id="viewport-selection">
 				Single-column (100%) on small screens,
 				two-column (50%) on medium screens,
 				and three-column (approximately 33%) on large screens.
@@ -282,9 +282,9 @@ Examples of usage</h3>
 					&lt;picture>
 						&lt;source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x">
 						&lt;source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x">
-						&lt;img src="small-1.jpg" srcset="small-2.jpg 2x" alt="">
+						&lt;img src="small-1.jpg" srcset="small-2.jpg 2x" alt="A figure of a fox jumping over a box.">
 					&lt;/picture>
-					&lt;figcaption>A figure of a fox jumping over a lazy box.&lt;/figcaption>
+					&lt;figcaption>Here we see the rare North Cantabridgan jumping fox in its natural habitat, leaping over a box.&lt;/figcaption>
 			&lt;/figure>
 		</pre>
 	</div>

index.html

@@ -613,14 +613,14 @@
 </p>
   <h1 class="p-name no-ref" id=title>The picture Element</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140701>1 July 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140801>1 August 2014</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://picture.responsiveimages.org/>http://picture.responsiveimages.org/</a><dt>Editor’s Draft:<dd><a href=http://picture.responsiveimages.org/>http://picture.responsiveimages.org/</a><dt>Test Suite:<dd>None Yet<dt>Editors:
 <dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://xanthir.com/contact/>Tab Atkins</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:simonp@opera.com>Simon Pieters</a> (<span class="p-org org">Opera Software</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://blog.yoav.ws/>Yoav Weiss</a><dd class="p-author h-card vcard"><span class="p-name fn">Marcos Cáceres</span> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://matmarquis.com/>Mat Marquis</a><dt>Version History:<dd><a href=https://github.com/ResponsiveImagesCG/picture-element/commits/gh-pages>Commit History</a><dd><a href=https://twitter.com/respimg_commits>Github commits on Twitter</a><dt>Participate:<dd><a href=http://w3c.responsiveimages.org/>Join the Responsive Images Community Group</a><dd><a href=http://list.responsiveimages.org/>Public Mailing List</a><dd><a href=irc://irc.w3.org:6665/#respimg>IRC: #respimg on W3C’s IRC</a><dd><a href=https://twitter.com/respimg>Twitter</a><dd><a href=https://github.com/ResponsiveImagesCG/picture-element>Github</a></dl></div>
   <div data-fill-with=warning></div>
   <p class=copyright data-fill-with=copyright><a href=http://creativecommons.org/publicdomain/zero/1.0/ rel=license><img alt=CC0 src=https://i.creativecommons.org/p/zero/1.0/80x15.png></a>
 To the extent possible under law, the editors have waived all copyright
 and related or neighboring rights to this work.
-In addition, as of 1 July 2014,
+In addition, as of 1 August 2014,
 the editors have made this specification available under the
 <a href=http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0 rel=license>Open Web Foundation Agreement Version 1.0</a>,
 which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
@@ -630,7 +630,8 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class
 </div>
 
 <h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2>
-<p class=p-summary data-fill-with=abstract>This specification defines the HTML <code>picture</code> element and extends the <code>img</code> and <code>source</code> elements to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.
+<p class=p-summary data-fill-with=abstract><p>This specification defines the HTML <code>picture</code> element and extends the <code>img</code> and <code>source</code> elements to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.</p>
+
 </p>
 <div data-fill-with=at-risk></div>
 
@@ -828,8 +829,8 @@ <h3 class="heading settled heading" data-level=1.2 id=examples><span class=secno
 <p>For example, say your site had three basic layouts:</p>
 
 		<figure>
-			<img src=images/viewport_selection_mob_first.jpg>
-			<figcaption>
+			<img aria-describedby=viewport-selection src=images/viewport_selection_mob_first.jpg>
+			<figcaption id=viewport-selection>
 				Single-column (100%) on small screens,
 				two-column (50%) on medium screens,
 				and three-column (approximately 33%) on large screens.
@@ -873,9 +874,9 @@ <h3 class="heading settled heading" data-level=1.2 id=examples><span class=secno
     &lt;picture&gt;
       &lt;source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"&gt;
       &lt;source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x"&gt;
-      &lt;img src="small-1.jpg" srcset="small-2.jpg 2x" alt=""&gt;
+      &lt;img src="small-1.jpg" srcset="small-2.jpg 2x" alt="A figure of a fox jumping over a box."&gt;
     &lt;/picture&gt;
-    &lt;figcaption&gt;A figure of a fox jumping over a lazy box.&lt;/figcaption&gt;
+    &lt;figcaption&gt;Here we see the rare North Cantabridgan jumping fox in its natural habitat, leaping over a box.&lt;/figcaption&gt;
 &lt;/figure&gt;
 </pre>
 	</div>