From b35cb64ff8950fafbb9f0f0c78ce371f8f976b38 Mon Sep 17 00:00:00 2001
From: Eusebius N <eugenius1@users.noreply.github.com>
Date: Thu, 30 Mar 2017 18:01:15 +0100
Subject: [PATCH] Icon replacement text for screen-reader/text-only browsing,
 fixes #176 (#189)

---
 _includes/footer.html       | 59 +++++++++++++++++++++++--------------
 _includes/social-share.html | 13 +++++---
 2 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index fcb6e9d..c3c656b 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -6,152 +6,167 @@
           {% if site.author.facebook and site.footer-links-active.facebook %}
           <li>
             <a href="https://www.facebook.com/{{ site.author.facebook }}" title="Facebook">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Facebook</span>
             </a>
           </li>
           {% endif %}
           {% if site.author.github and site.footer-links-active.github %}
           <li>
             <a href="https://github.com/{{ site.author.github }}" title="GitHub">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-github fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">GitHub</span>
             </a>
           </li>
           {% endif %}
 		  {% if site.author.twitter and site.footer-links-active.twitter %}
           <li>
             <a href="https://twitter.com/{{ site.author.twitter }}" title="Twitter">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Twitter</span>
             </a>
           </li>
           {% endif %}
 	  {% if site.author.reddit and site.footer-links-active.reddit %}
           <li>
             <a href="https://reddit.com/u/{{ site.author.reddit }}" title="Reddit">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-reddit fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Reddit</span>
             </a>
           </li>
           {% endif %}
       {% if site.author.google-plus and site.footer-links-active.google-plus %}
           <li>
             <a href="https://plus.google.com/{{ site.author.google-plus }}" title="Google+">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Google+</span>
             </a>
           </li>
           {% endif %}
 		  {% if site.author.email and site.footer-links-active.email %}
           <li>
             <a href="mailto:{{ site.author.email }}" title="Email me">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Email me</span>
             </a>
           </li>
           {% endif %}
 		  {% if site.author.linkedin and site.footer-links-active.linkedin %}
           <li>
             <a href="https://linkedin.com/in/{{ site.author.linkedin }}" title="LinkedIn">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">LinkedIn</span>
             </a>
           </li>
           {% endif %}
 		  {% if site.author.xing and site.footer-links-active.xing %}
           <li>
             <a href="https://www.xing.com/profile/{{ site.author.xing }}" title="Xing">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-xing fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Xing</span>
             </a>
           </li>
           {% endif %}
 		  {% if site.author.stackoverflow and site.footer-links-active.stackoverflow %}
           <li>
             <a href="https://stackoverflow.com/users/{{ site.author.stackoverflow }}" title="StackOverflow">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-stack-overflow fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">StackOverflow</span>
             </a>
           </li>
           {% endif %}
       {% if site.author.snapchat and site.footer-links-active.snapchat %}
           <li>
             <a href="https://www.snapchat.com/add/{{ site.author.snapchat }}" title="Snapchat">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-snapchat-ghost fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Snapchat</span>
             </a>
           </li>
           {% endif %}
       {% if site.author.instagram and site.footer-links-active.instagram %}
           <li>
             <a href="https://www.instagram.com/{{ site.author.instagram }}" title="Instagram">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Instagram</span>
             </a>
           </li>
           {% endif %}
       {% if site.author.youtube and site.footer-links-active.youtube %}
           <li>
             <a href="https://www.youtube.com/{{ site.author.youtube }}" title="YouTube">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">YouTube</span>
             </a>
           </li>
           {% endif %}
       {% if site.author.spotify and site.footer-links-active.spotify %}
           <li>
             <a href="https://open.spotify.com/user/{{ site.author.spotify }}" title="Spotify">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-spotify fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Spotify</span>
             </a>
           </li>
        {% endif %}
       {% if site.author.telephone and site.footer-links-active.telephone %}
           <li>
             <a href="tel:{{ site.author.telephone }}" title="Phone">
-              <span class="fa-stack fa-lg">
+              <span class="fa-stack fa-lg" aria-hidden="true">
                 <i class="fa fa-circle fa-stack-2x"></i>
                 <i class="fa fa-phone fa-stack-1x fa-inverse"></i>
               </span>
+              <span class="sr-only">Phone</span>
             </a>
           </li>
         {% endif %}
 		  {% if site.footer-links-active.rss %}
-		  <li>
-			<a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="RSS">
-			  <span class="fa-stack fa-lg">
-				<i class="fa fa-circle fa-stack-2x"></i>
-				<i class="fa fa-rss fa-stack-1x fa-inverse"></i>
-			  </span>
-			</a>
-		  </li>
+          <li>
+            <a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="RSS">
+              <span class="fa-stack fa-lg" aria-hidden="true">
+                <i class="fa fa-circle fa-stack-2x"></i>
+                <i class="fa fa-rss fa-stack-1x fa-inverse"></i>
+              </span>
+              <span class="sr-only">RSS</span>
+            </a>
+          </li>
           {% endif %}
         </ul>
         <p class="copyright text-muted">
diff --git a/_includes/social-share.html b/_includes/social-share.html
index c8a74b2..53d75d0 100644
--- a/_includes/social-share.html
+++ b/_includes/social-share.html
@@ -8,36 +8,41 @@
 
 {% if any-share-links %}
 <section id = "social-share-section">
+  <span class="sr-only">Share: </span>
 
-  <!--- Share on Twitter -->
   {% if site.share-links-active.twitter %}
+  <!--- Share on Twitter -->
     <a href="https://twitter.com/intent/tweet?text={{ page.title | url_encode }}+{{ site.url }}{{ page.url }}"
       class="btn btn-social-icon btn-twitter" title="Share on Twitter">
       <span class="fa fa-fw fa-twitter" aria-hidden="true"></span>
+      <span class="sr-only">Twitter</span>
     </a>
   {% endif %}
 
-  <!--- Share on Facebook -->
   {% if site.share-links-active.facebook %}
+  <!--- Share on Facebook -->
     <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}"
       class="btn btn-social-icon btn-facebook" title="Share on Facebook">
       <span class="fa fa-fw fa-facebook" aria-hidden="true"></span>
+      <span class="sr-only">Facebook</span>
     </a>
   {% endif %}
 
-  <!--- Share on Google Plus -->
   {% if site.share-links-active.google %}
+  <!--- Share on Google Plus -->
     <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}"
       class="btn btn-social-icon btn-google" title="Share on Google+">
       <span class="fa fa-fw fa-google-plus" aria-hidden="true"></span>
+      <span class="sr-only">Google+</span>
     </a>
   {% endif %}
 
-  <!--- Share on LinkedIn -->
   {% if site.share-links-active.linkedin %}
+  <!--- Share on LinkedIn -->
     <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}"
       class="btn btn-social-icon btn-linkedin" title="Share on LinkedIn">
       <span class="fa fa-fw fa-linkedin" aria-hidden="true"></span>
+      <span class="sr-only">LinkedIn</span>
     </a>
   {% endif %}