Improved accessibility using HTML_CodeSniffer

static/css/main.css

@@ -47,12 +47,6 @@ a {
 .uk-icon-google-plus, .uk-icon-google-plus-square {
   color: #D34836; }
 
-.uk-icon-github {
-  color: #333; }
-
-.uk-icon-envelope {
-  color: #444; }
-
 .uk-nav-side > li.uk-active > a {
   background: #28D1B2; }
 
@@ -126,9 +120,9 @@ a {
   align-items: center; }
 .mg-tag-filter {
   background-color: transparent;
-  border: 1px solid white;
+  border: 2px solid white;
   overflow: visible;
-  color: black;
+  color: #444;
   font: inherit;
   padding: .5rem 1.5rem;
   margin: .5rem 1rem;
@@ -138,11 +132,9 @@ a {
     border-color: #b2b2b2;
     text-decoration: none; }
   .mg-tag-filter-enabled {
-    background-color: #33b5e5;
+    background-color: #33b5e5; }
-    border-color: black; }
   .mg-tag-filter-disabled {
-    background-color: #FF9148;
+    background-color: #FF9148;  }
-    border-color: black;    }
 
 .mg-nav-small {
   width: 100% }
@@ -209,17 +201,17 @@ a {
 .mg-author {
   margin-top: 1em; }
 
+.mg-icon-link {
+  padding: .3rem;
+  color: #444; }
 .mg-icon-link:hover {
   text-decoration: none; }
 
 .mg-icons-small {
   margin-bottom: 1em; }
 
-.mg-icons-small > li > a {
-  color: white; }
-  .mg-icons-small > li > a:hover {
-    color: white; }
 .mg-icons-small .uk-icon-rss {
+  color: white;
   background-color: #FF6600; }
 .mg-icons-small .uk-icon-twitter {
   background-color: #00B0ED; }
@@ -227,8 +219,6 @@ a {
   background-color: #3B5999; }
 .mg-icons-small .uk-icon-google-plus {
   background-color: #D34836; }
-.mg-icons-small .uk-icon-github {
-  background-color: #333; }
 .mg-icons-small .uk-icon-envelope {
   background-color: #059; }
 
@@ -238,14 +228,16 @@ a {
   height: 28px;
   width: 28px;
   background-image: url(../shaarli-icon.png);
-  background-size: contain;}
+  background-size: contain;
+  vertical-align: middle; }
 .uk-icon-stackoverflow:before {
   content: ' ';
   display: inline-block;
   height: 28px;
   width: 28px;
   background-image: url(../stackoverflow-icon.png);
-  background-size: contain;}
+  background-size: contain;
+  vertical-align: middle; }
 
 .mg-support-logo {
   margin: .5rem;}

static/js/tipuesearch.js

@@ -95,9 +95,9 @@ http://www.tipue.com/search
                {
                     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20')) || null;
                }
-               if (getURLP('content'))
+               if (getURLP('q'))
                {
-                    $('main .tipue_search').val(getURLP('content'));
+                    $('main .tipue_search').val(getURLP('q'));
                     getTipueSearch(0, true);
                }
 

templates/base.html

@@ -65,7 +65,7 @@
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
 <![endif]-->
 
-<header class="mg-header uk-navbar uk-navbar-attached">
+<header role="banner" class="mg-header uk-navbar uk-navbar-attached">
 
     <div class="mg-header-content uk-container uk-container-center">
 
@@ -87,7 +87,7 @@
     </div>
 </header>
 
-<main class="mg-main">
+<main role="main" class="mg-main">
 
 <div class="uk-container uk-container-center">
 
@@ -96,14 +96,14 @@
         {% block content %}
         {% endblock %}
 
-        <div class="uk-width-medium-1-5 uk-hidden-small">
+        <div role="navigation" class="uk-width-medium-1-5 uk-hidden-small">
 
             {% if SOCIAL %}
             <div class="uk-panel uk-panel-box">
                 <h3 class="uk-panel-title">Ubiquité</h3>
-                {% for icon, link in SOCIAL %}
+                {% for link_destination, link in SOCIAL %}
-                <a class="mg-icon-link" href="{{ link }}">
+                <a class="mg-icon-link" href="{{ link }}" title="Link to my {{ link_destination }}">
-                    <i class="uk-icon-{{ icon }} uk-icon-medium"></i>
+                    <i class="uk-icon-{{ link_destination }} uk-icon-medium" aria-hidden="true"></i>
                 </a>
                 {% endfor %}
             </div>
@@ -136,9 +136,9 @@
 
             {% if not DISABLE_SEARCH %}
             <div class="uk-panel uk-panel-box">
-                <form class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
+                <form role="search" class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
-                    <input type="submit" class="mg-search-button" value="&#xf002;">
+                    <input type="submit" title="Submit search terms" class="mg-search-button" value="&#xf002;">
-                    <input class="mg-search-query uk-search-field tipue_search" type="search" name="content" autocomplete="off" placeholder="Search...">
+                    <input type="search" title="words" placeholder="words" name="q" class="mg-search-query uk-search-field tipue_search" autocomplete="off">
                 </form>
             </div>
             {% endif %}
@@ -177,15 +177,17 @@
 
 </main>
 
-<footer class="mg-footer">
+<footer role="contentinfo" class="mg-footer">
     <div class="uk-container uk-container-center uk-text-center">
 
         <ul class="mg-icons-small uk-subnav uk-visible-small">
             <li><a rel="alternate" type="application/atom+xml" href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" class="uk-icon-button uk-icon-rss"></a></li>
             {% if SOCIAL %}
-            {% for icon, link in SOCIAL %}
+            {% for link_destination, link in SOCIAL %}
             <li>
-                <a href="{{ link }}" class="uk-icon-button uk-icon-{{ icon.replace("-square", "") }}"></a>
+                <a class="mg-icon-link" href="{{ link }}" title="Link to my {{ link_destination }}">
+                    <i class="uk-icon-{{ link_destination }} uk-icon-medium" aria-hidden="true"></i>
+                </a>
             </li>
             {% endfor %}
             {% endif %}
@@ -193,7 +195,6 @@
 
         <div class="mg-author uk-panel">
             <p>{{ FOOTER }}</p>
-
             <p>Powered by <a href="http://blog.getpelican.com">Pelican</a>.<br class="uk-visible-small"> Theme <a href="https://github.com/Lucas-C/pelican-mg">mg</a> thanks to <a href="https://github.com/lucachr">Luca Chiricozzi</a></p>
         </div>
     </div>
@@ -203,9 +204,9 @@
     <div class="uk-offcanvas-bar">
 
         {% if not DISABLE_SEARCH %}
-        <form class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
+        <form role="search" class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
-            <input type="submit" class="mg-search-button" value="&#xf002;">
+            <input type="submit" title="Submit search terms" class="mg-search-button" value="&#xf002;">
-            <input class="uk-search-field tipue_search" type="search" name="content" autocomplete="off" placeholder="Search...">
+            <input type="search" title="words" placeholder="words" name="content" class="mg-search-query uk-search-field tipue_search" autocomplete="off">
         </form>
         {% endif %}