Merge pull request tachyons-css#24 from tachyons-css/accessibility

Add alt text to images in Components & Docs

Author: johno

docs/elements/forms/index.html

@@ -76,8 +76,10 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-forms</h4>
       <div class="ph3 ph5-ns pt4 pb5">
         <h2 class="f3 bold">Examples</h2>
         <form>
-          <code class="f6 db">input-reset</code>
-          <input type="text" class="input-reset">
+          <label for="inputReset">
+            <code class="f6 db">input-reset</code>
+          </label>
+          <input id="inputReset" type="text" class="input-reset">
         </form>
         <div class="mt5 cf">
           <div class="dib mr4">

docs/elements/images/index.html

@@ -55,13 +55,13 @@ <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.
         </p>
-        <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>

docs/elements/links/index.html

@@ -80,11 +80,11 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-links</h4>
       <div class="ph3 ph5-ns pt4 pb5">
         <h2 class="f3 bold">Examples</h2>
         <p>
-          <a href="#" class="db b link pv1 hover-gray black">Black link</a>
-          <a href="#" class="db b link pv1 hover-black near-black">Near-black link</a>
-          <a href="#" class="db b link pv1 hover-black dark-gray">Dark-gray link</a>
-          <a href="#" class="db b link pv1 hover-black mid-gray">Mid-gray link</a>
-          <a href="#" class="db b link pv1 hover-black gray">Gray link</a>
+          <a href="#" class="db b link pv1 hover-gray focus-gray black">Black link</a>
+          <a href="#" class="db b link pv1 hover-black focus-black near-black">Near-black link</a>
+          <a href="#" class="db b link pv1 hover-black focus-black dark-gray">Dark-gray link</a>
+          <a href="#" class="db b link pv1 hover-black focus-black mid-gray">Mid-gray link</a>
+          <a href="#" class="db b link pv1 hover-black focus-black gray">Gray link</a>
         </p>
         <div class="mt5 cf">
           <div class="dib mr4">

docs/layout/floats/index.html

@@ -98,7 +98,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/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