Adding accessibility skiplinks

static/css/main.css

@@ -83,6 +83,7 @@ a {
 
 
 .mg-header {
+  overflow: hidden; /* to hide the absolutely positioned mg-skiplinks child */
   background-color: #39b39d; }
 
 .mg-header-content {
@@ -94,8 +95,7 @@ a {
   font-style: italic;
   font-size: 2.5em;
   padding-left: 0;
-  color: white;
-  text-decoration: none; }
+  color: white; }
   .mg-brand:hover, .mg-brand:focus {
     color: white; }
   @media (max-width: 767px) {
@@ -130,8 +130,7 @@ a {
   text-transform: uppercase;
   cursor: pointer; }
   .mg-tag-filter:hover {
-    border-color: #b2b2b2;
-    text-decoration: none; }
+    border-color: #b2b2b2; }
   .mg-tag-filter-include {
     background-color: #33b5e5; }
   .mg-tag-filter-exclude {
@@ -174,7 +173,6 @@ a {
 .mg-feed {
   color: #bf4d00; }
   .mg-feed:hover {
-    text-decoration: none;
     color: #FF6600; }
 
 .mg-tags {
@@ -204,8 +202,6 @@ a {
 
 .mg-icon-link {
   padding: .3rem; }
-.mg-icon-link:hover {
-  text-decoration: none; }
 
 .mg-icons-small {
   margin-bottom: 1em; }
@@ -299,3 +295,19 @@ a {
   max-height: 0;
   transition: max-height 1s ease-out;
 }
+
+
+/* Accessibility */
+a:focus, .uk-link:focus, .uk-navbar-brand:focus {
+  outline: 1px dotted !important; /* resetting an outline - damn uikit :( */
+}
+
+.mg-skiplinks {
+  list-style-type: none;
+}
+.mg-skiplinks a {
+  color: #39b39d;
+}
+.mg-skiplinks a:focus {
+  color: white;
+}

templates/base.html

@@ -74,6 +74,10 @@
             <div class="mg-tagline uk-navbar-content">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div>
         </div>
 
+        <ul class="mg-skiplinks">
+            <li><a href="#search-form">Search form</a></li>
+        </ul>
+
         <div class="mg-header-extra uk-hidden-small">
             {% block header_extra %}
             {% endblock %}
@@ -136,7 +140,7 @@
 
             {% if not DISABLE_SEARCH %}
             <div class="uk-panel uk-panel-box">
-                <form role="search" title="Search form" class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
+                <form id="search-form" role="search" title="Search form" class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
                     <input type="submit" title="Submit search terms" class="mg-search-button" value="&#xf002;">
                     <input type="search" title="words" placeholder="words" name="q" class="mg-search-query uk-search-field tipue_search" autocomplete="off">
                 </form>