accessibility updates for links and icons (#85)

jbub · Sep 21, 2020 · 8f40b2f · 8f40b2f
1 parent 9cfd1ab
commit 8f40b2f
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 35 deletions.
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -5,10 +5,10 @@
             <div class="container">
                 <div class="site-title-wrapper">
                     <h1 class="site-title">
-                        <a title="{{ .Site.Title }}" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+                        <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
                     </h1>
-                    <a class="button-square button-jump-top js-jump-top" href="#">
-                        <i class="fa fa-angle-up"></i>
+                    <a class="button-square button-jump-top js-jump-top" href="#" aria-label="Back to Top">
+                        <i class="fa fa-angle-up" aria-hidden="true"></i>
                     </a>
                 </div>
 

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -30,50 +30,50 @@
                 <div class="container">
                     <div class="site-title-wrapper">
                         {{ with .Site.Params.logo }}
-                            <a class="site-logo" title="{{ .Title }}" href="{{ .Site.BaseURL }}">
+                            <a class="site-logo" href="{{ .Site.BaseURL }}">
                                 <img src="{{ . }}" alt="{{ .Title }}" />
                             </a>
                         {{ else }}
                             <h1 class="site-title">
-                                <a title="{{ .Site.Title }}" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+                                <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
                             </h1>
                         {{ end }}
                         {{ if .Site.Params.rss }}
                             <a class="button-square" href="{{ .Site.BaseURL }}index.xml"><i class="fa fa-rss"></i></a>
                         {{ end }}
                         {{ with .Site.Params.twitter }}
-                            <a class="button-square button-social hint--top" data-hint="Twitter" title="Twitter" href="{{ . }}" rel="me">
-                                <i class="fa fa-twitter"></i>
+                            <a class="button-square button-social hint--top" data-hint="Twitter" aria-label="Twitter" href="{{ . }}" rel="me" >
+                                <i class="fa fa-twitter" aria-hidden="true"></i>
                             </a>
                         {{ end }}
                         {{ with .Site.Params.facebook }}
-                            <a class="button-square button-social hint--top" data-hint="Facebook" title="Facebook" href="{{ . }}" rel="me">
-                                <i class="fa fa-facebook"></i>
+                            <a class="button-square button-social hint--top" data-hint="Facebook" aria-label="Facebook" href="{{ . }}" rel="me">
+                                <i class="fa fa-facebook" aria-hidden="true"></i>
                             </a>
                         {{ end }}
                         {{ with .Site.Params.gitlab }}
-                            <a class="button-square button-social hint--top" data-hint="Gitlab" title="Gitlab" href="{{ . }}" rel="me">
-                                <i class="fa fa-gitlab"></i>
+                            <a class="button-square button-social hint--top" data-hint="Gitlab" aria-label="Gitlab" href="{{ . }}" rel="me">
+                                <i class="fa fa-gitlab" aria-hidden="true"></i>
                             </a>
                         {{ end }}
                         {{ with .Site.Params.github }}
-                            <a class="button-square button-social hint--top" data-hint="Github" title="Github" href="{{ . }}" rel="me">
-                                <i class="fa fa-github-alt"></i>
+                            <a class="button-square button-social hint--top" data-hint="Github" aria-label="Github" href="{{ . }}" rel="me">
+                                <i class="fa fa-github-alt" aria-hidden="true"></i>
                             </a>
                         {{ end }}
                         {{ with .Site.Params.stackoverflow }}
-                            <a class="button-square button-social hint--top" data-hint="Stack Overflow" title="Stack Overflow" href="{{ . }}" rel="me">
-                                <i class="fa fa-stack-overflow"></i>
+                            <a class="button-square button-social hint--top" data-hint="Stack Overflow" aria-label="Stack Overflow" href="{{ . }}" rel="me">
+                                <i class="fa fa-stack-overflow" aria-hidden="true"></i>
                             </a>
                         {{ end }}
                         {{ with .Site.Params.linkedin }}
-                            <a class="button-square button-social hint--top" data-hint="LinkedIn" title="LinkedIn" href="{{ . }}" rel="me">
-                                <i class="fa fa-linkedin"></i>
+                            <a class="button-square button-social hint--top" data-hint="LinkedIn" aria-label="LinkedIn" href="{{ . }}" rel="me">
+                                <i class="fa fa-linkedin" aria-hidden="true"></i>
                             </a>
                         {{ end }}
                         {{ with .Site.Params.email }}
-                            <a class="button-square button-social hint--top" data-hint="Email" title="Email" href="mailto:{{ . }}">
-                                <i class="fa fa-envelope"></i>
+                            <a class="button-square button-social hint--top" data-hint="Email" aria-label="Send an Email" href="mailto:{{ . }}">
+                                <i class="fa fa-envelope" aria-hidden="true"></i>
                             </a>
                         {{ end }}
                     </div>

diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
@@ -1,5 +1,5 @@
 {{ range .Site.Menus.main.ByWeight }}
     <li class="site-nav-item">
-        <a title="{{ .Name }}" href="{{ .URL }}">{{ .Name }}</a>
+        <a href="{{ .URL }}">{{ .Name }}</a>
     </li>
-{{ end }}
+{{ end }}
diff --git a/layouts/partials/post-footer.html b/layouts/partials/post-footer.html
@@ -13,32 +13,28 @@
     <div class="share">
         {{ if .Site.Params.shareTwitter }}
             <a class="icon-twitter" href="https://twitter.com/share?text={{ .Title }}&url={{ .Permalink }}"
-                onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
-                <i class="fa fa-twitter"></i>
-                <span class="hidden">Twitter</span>
+                onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;" aria-label="Share on Twitter">
+                <i class="fa fa-twitter" aria-hidden="true"></i>
             </a>
         {{ end }}
 
         {{ if .Site.Params.sharefacebook }}
             <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"
-                onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
-                <i class="fa fa-facebook"></i>
-                <span class="hidden">Facebook</span>
+                onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;" aria-label="Share on Facebook">
+                <i class="fa fa-facebook" aria-hidden="true"></i>
             </a>
         {{ end }}
 
         {{ if .Site.Params.shareGooglePlus }}
             <a class="icon-google-plus" href="https://plus.google.com/share?url={{ .Permalink }}"
-              onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
-              <i class="fa fa-google-plus"></i>
-                <span class="hidden">Google+</span>
+              onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;" aria-label="Share on Google+">
+              <i class="fa fa-google-plus" aria-hidden="true"></i>
             </a>
         {{ end }}
         {{ if .Site.Params.shareLinkedIn }}
             <a class="icon-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&title={{ .Title }}&url={{ .Permalink }}&summary={{ .Description }}"
-               onclick="window.open(this.href, 'linkedin-share', 'width=554,height=481');return false;">
-               <i class="fa fa-linkedin"></i>
-               <span class="hidden">LinkedIn</span>
+               onclick="window.open(this.href, 'linkedin-share', 'width=554,height=481');return false;" aria-label="Share on LinkedIn">
+               <i class="fa fa-linkedin" aria-hidden="true"></i>
             </a>
         {{ end }}
     </div>

diff --git a/layouts/partials/post-stub.html b/layouts/partials/post-stub.html
@@ -1,9 +1,9 @@
 <li class="post-stub" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">
-    <a href="{{ .Permalink }}" itemprop="url" title="Go to post detail">
+    <a href="{{ .Permalink }}" itemprop="url">
         <h4 class="post-stub-title" itemprop="name">{{ .Title }}</h4>
         <time class="post-stub-date" datetime="{{ .Date.Format "2006-01-02" }}">Published {{ dateFormat (default "Mon, Jan 2, 2006" .Site.Params.dateFormat) .Date }}</time>
         {{ with .Params.featured }}
             <span class="post-stub-tag">Featured</span>
         {{ end }}
     </a>
-</li>
+</li>