Merge pull request #27 from spikeheap/master

Add screen-reader alternative text for FontAwesome icons

Author: Oliver Stapleton

_includes/footer.html

@@ -11,7 +11,10 @@ <h4>Social Links</h4>
                 <div class="hline-w"></div>
                 <p>
                     {% for network in site.social %}
-                        <a href="{{ network.url }}" class="btn-social btn-outline"><i class="fa fa-{{ network.title }}"></i></a>
+                        <a href="{{ network.url }}" class="btn-social btn-outline">
+                          <i class="fa fa-{{ network.title }}" aria-hidden="true"></i>
+                          <span class="sr-only">{{network.title}}</span>
+                        </a>
                     {% endfor %}
                 </p>
             </div>

index.html

@@ -8,19 +8,22 @@
     <div class="container">
         <div class="row centered">
             <div class="col-md-4">
-                <i class="fa fa-heart-o"></i>
+                <i class="fa fa-heart-o" aria-hidden="true"></i>
+                <span class="sr-only">An image of a love-heart</span>
                 <h4>Handsomely Crafted</h4>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                 <p><br/><a href="#" class="btn btn-theme">More Info</a></p>
             </div>
             <div class="col-md-4">
-                <i class="fa fa-flask"></i>
+                <i class="fa fa-flask" aria-hidden="true"></i>
+                <span class="sr-only">An image of a laboratory flask</span>
                 <h4>Retina Ready</h4>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                 <p><br/><a href="#" class="btn btn-theme">More Info</a></p>
             </div>
             <div class="col-md-4">
-                <i class="fa fa-trophy"></i>
+                <i class="fa fa-trophy" aria-hidden="true"></i>
+                <span class="sr-only">An image of a trophy</span>
                 <h4>Quality Theme</h4>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                 <p><br/><a href="#" class="btn btn-theme">More Info</a></p>