Add alt text to images in Components & Docs

Changed files in `src/` this time.

Author: donnieberg

src/components/articles/title-text-image.html

@@ -3,7 +3,7 @@
 }}}
 <article class="pa3 pa5-ns">
   <h1 class="f2">Title Text with Image</h1>
-  <img src="/img/space.jpg" class="w-100 f5 measure">
+  <img src="/img/space.jpg" class="w-100 f5 measure" alt="outer space">
   <p class="measure lh-copy">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
     tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At

src/components/collections/product-card.html

@@ -2,7 +2,7 @@
   "bodyClass" : "bg-white"
 }}}
 <article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
-  <img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top">
+  <img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="kitty">
   <div class="pa2 ph3-ns pb3-ns">
     <div class="dt w-100 mt1">
       <div class="dtc">

src/components/headers/circle-avatar-title-subtitle.html

@@ -2,7 +2,7 @@
   "bodyClass" : "bg-white"
 }}}
 <header class="tc pv4 pv5-ns">
-  <img src="/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3">
+  <img src="/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3" alt="avatar">
   <h1 class="f5 f4-ns fw6 mid-gray">Jasper Whitehouse</h1>
   <h2 class="f6 gray fw2 ttu tracked">Los Angeles</h2>
 </header>

src/components/headers/rounded-avatar-title-subtitle.html

@@ -2,7 +2,7 @@
   "bodyClass" : "bg-white"
 }}}
 <header class="tc pv4 pv5-ns">
-  <img src="/img/logo.jpg" class="br3 ba b--black-10 h3 w3">
+  <img src="/img/logo.jpg" class="br3 ba b--black-10 h3 w3" alt="avatar">
   <h1 class="f5 f4-ns fw6 black-70">Jasper Whitehouse</h1>
   <h2 class="f6 black-70 fw2 ttu tracked">Los Angeles</h2>
 </header>

src/components/layout/four-column-collapse-two.html

@@ -2,10 +2,10 @@
   "bodyClass" : "bg-white"
 }}}
 <section class="cf">
-  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/1.jpg"></div>
-  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/2.jpg"></div>
-  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/3.jpg"></div>
-  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/4.jpg"></div>
+  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/1.jpg" alt="night sky over house"></div>
+  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/2.jpg" alt="night sky over water"></div>
+  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/3.jpg" alt="bay bridge at night"></div>
+  <div class="fl w-50 w-25-ns"><img class="db w-100" src="/img/4.jpg" alt="night sky over land"></div>
 
 
 </section>

src/templates/docs/floats/index.html

@@ -62,7 +62,7 @@ <h3 class="f5 book pt4 caps">Float None</h3>
   <h3 class="f5 book pt4 caps">Float With Images</h3>
   <p class="f3">Originally floats were used to wrap text around images as in the example below.</p>
   <div class="cf">
-    <img src="/img/example-1.jpg" class="fl w4 mr3">
+    <img src="/img/example-1.jpg" class="fl w4 mr3" alt="example 1">
     <p class="measure mtn">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
       tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At

src/templates/docs/images/index.html

@@ -20,12 +20,12 @@ <h3 class="f5 book pt4 caps">Image</h3>
   <p class="measure lh-copy f5 f4-ns">
     This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
   </p>
-  <code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100"&gt;</code>
-  <img src="/img/over-canvas.jpg" class="w-100">
+  <code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100" alt="night sky over land"&gt;</code>
+  <img src="/img/over-canvas.jpg" class="w-100" alt="night sky over land">
   <p class="f5 f4-ns lh-copy measure mt4">The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
 
-  <code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100"&gt;</code>
-  <img src="/img/under-canvas.jpg" class="db mw-100">
+  <code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100" alt="night sky over water"&gt;</code>
+  <img src="/img/under-canvas.jpg" class="db mw-100" alt="night sky over water">
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>