Add label to input in Forms Docs

Author: donnieberg

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/templates/docs/forms/index.html

@@ -40,8 +40,10 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></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">