Merge pull request #3256 from XhmikosR/accessibility-tweaks

site/_includes/anchor_links.html

@@ -3,7 +3,8 @@
     var anchor = document.createElement("a");
     anchor.className = "header-link";
     anchor.href      = "#" + id;
-    anchor.innerHTML = "<i class=\"fa fa-link\"></i>";
+    anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
+    anchor.title = "Permalink";
     return anchor;
   };
 

site/_includes/footer.html

@@ -1,4 +1,4 @@
-<footer>
+<footer role="contentinfo">
   <div class="grid">
     <div class="unit one-third center-on-mobiles">
       <p>The contents of this website are &copy;&nbsp;{{ site.time | date: '%Y' }} <a href="http://tom.preston-werner.com/">Tom Preston-Werner</a> under the terms of the <a href="{{ site.repository }}/blob/master/LICENSE">MIT&nbsp;License</a>.</p>

site/_includes/header.html

@@ -1,4 +1,4 @@
-<header>
+<header role="banner">
   <nav class="mobile-nav show-on-mobiles">
     {% include primary-nav-items.html %}
   </nav>
@@ -6,8 +6,8 @@
     <div class="unit one-third center-on-mobiles">
       <h1>
         <a href="/">
-          <span>Jekyll</span>
-          <img src="/img/logo-2x.png" width="249" height="115" alt="Logo">
+          <span class="sr-only">Jekyll</span>
+          <img src="/img/logo-2x.png" width="249" height="115" alt="Jekyll Logo">
         </a>
       </h1>
     </div>

site/_includes/news_item.html

@@ -14,7 +14,7 @@
       {{ post.date | date_to_string }}
     </span>
     <a href="https://github.com/{{ post.author }}" class="post-author">
-      <img src="https://github.com/{{ post.author }}.png" class="avatar" alt="{{ post.author }}" width="24" height="24">
+      <img src="https://github.com/{{ post.author }}.png" class="avatar" alt="{{ post.author }} avatar" width="24" height="24">
       {{ post.author }}
     </a>
   </div>

site/_layouts/news_item.html

@@ -17,7 +17,7 @@ layout: news
       {{ page.date | date_to_string }}
     </span>
     <a href="https://github.com/{{ page.author }}" class="post-author">
-      <img src="https://github.com/{{ page.author }}.png" class="avatar" alt="{{ page.author }}" width="24" height="24">
+      <img src="https://github.com/{{ page.author }}.png" class="avatar" alt="{{ page.author }} avatar" width="24" height="24">
       {{ page.author }}
     </a>
   </div>

site/_sass/_style.scss

@@ -44,9 +44,6 @@ header {
   h1,
   nav { display: inline-block; }
 
-  h1 {
-    span { display: none; }
-  }
 }
 
 nav {
@@ -165,10 +162,10 @@ h6:hover .header-link {
 /* Footer */
 
 footer {
-  background-color: #222;
+  background-color: #212121;
   font-size: 16px;
   padding-bottom: 5px;
-  color: #888;
+  color: #c0c0c0;
   margin-top: 40px;
 
   a {
@@ -230,7 +227,7 @@ footer {
 
   .content { padding: 0; }
 
-  h4 {
+  h3 {
     font-size: 24px;
     line-height: 24px;
     margin-top: 20px;
@@ -253,7 +250,7 @@ footer {
       float: right;
     }
 
-    h4 {
+    h3 {
       margin: 50px 0 0;
       text-align: center;
     }
@@ -295,7 +292,7 @@ footer {
       padding: 20px;
       text-shadow: none;
       margin: 0 20px;
-      background-color: #3d3d3d;
+      background-color: #171717;
       @include border-radius(0 0 5px 5px);
       @include box-shadow(0 5px 30px rgba(0,0,0,.3));
     }
@@ -333,7 +330,7 @@ footer {
 .free-hosting {
 
   .pane {
-    background-color: #444;
+    background-color: #3e3e3e;
     @include border-radius(10px);
     text-shadow: none;
     position: relative;
@@ -483,7 +480,7 @@ aside {
     @include border-radius(5px);
     /*border: 1px solid #333;*/
     @include box-shadow(0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5));
-    background-color: #777;
+    background-color: #767676;
   }
 
   a:hover {
@@ -597,7 +594,7 @@ article h2:first-child { margin-top: 0; }
 
 .post-meta {
   padding: 5px 0;
-  color: #aaa;
+  color: #c0c0c0;
   font-weight: 600;
   text-shadow: 0 -1px 0 #000;
 }
@@ -635,7 +632,7 @@ p > nobr > code,
 li > code,
 h5 > code,
 .note > code {
-  background-color: #333;
+  background-color: #2b2b2b;
   color: #fff;
   @include border-radius(5px);
   @include box-shadow(inset 0 1px 10px rgba(0,0,0,.3),
@@ -971,3 +968,18 @@ code.output {
     display: inline !important;
   }
 }
+
+
+/* Helper class taken from Bootstrap.
+   Hides an element to all devices except screen readers.
+*/
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

site/index.html

@@ -38,7 +38,7 @@ overview: true
 <section class="quickstart">
   <div class="grid">
     <div class="unit golden-small center-on-mobiles">
-      <h4>Get up and running <em>in&nbsp;seconds</em>.</h4>
+      <h3>Get up and running <em>in&nbsp;seconds</em>.</h3>
     </div>
     <div class="unit golden-large code">
       <p class="title">Quick-start Instructions</p>