accessibility fixes.

16 files changed, 77 insertions, 94 deletions

diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index c1a3cc6..50141d1 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -64,16 +64,20 @@
                                 <div class="col-12 col-md-6">
                                     {{ if .PrevInSection }}
                                         <div class="mx-0 mx-md-4 mt-4 text-left">
-                                            <img class="icon" src="/img/back.svg" alt="back" />
-                                            <a href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a>
+                                            <a href="{{ .PrevInSection.Permalink }}">
+                                                {{ partial "icon_back" . }}
+                                                <span class="text">{{ .PrevInSection.Title }}</span>
+                                            </a>
                                         </div>
                                     {{ end }}
                                 </div>
                                 <div class="col-12 col-md-6">
                                     {{ if .NextInSection }}
                                         <div class="mx-0 mx-md-4 mt-4 text-right">
-                                            <a href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }}</a>
-                                            <img class="icon" src="/img/next.svg" alt="next" />
+                                            <a href="{{ .NextInSection.Permalink }}">
+                                                <span class="text">{{ .NextInSection.Title }}</span>
+                                                {{ partial "icon_next" . }}
+                                            </a>
                                         </div>
                                     {{ end }}
                                 </div>
diff --git a/layouts/partials/footer_500px.html b/layouts/partials/footer_500px.html
index 2af762d..b0fe132 100644
--- a/layouts/partials/footer_500px.html
+++ b/layouts/partials/footer_500px.html
@@ -1,5 +1,9 @@
 {{ if .Site.Params._500px }}
-    <a href="https://500px.com/{{ .Site.Params._500px }}" target="_blank" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="https://500px.com/{{ .Site.Params._500px }}"
+        target="_blank"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="500px">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792">
             <path d="M1529 1547l-6 6q-113 113-259 175-154 64-317 64-165 0-317-64-148-63-259-175-113-112-175-258-42-103-54-189-4-28 48-36 51-8 56 20 1 1 1 4 18 90 46 159 50 124 152 226 98 98 226 152 132 56 276 56 143 0 276-56 128-55 225-152l6-6q10-10 25-6 12 3 33 22 36 37 17 58zm-472-615l-66 66 63 63q21 21-7 49-17 17-32 17-10 0-19-10l-62-61-66 66q-5 5-15 5-15 0-31-16l-2-2q-18-15-18-29 0-7 8-17l66-65-66-66q-16-16 14-45 18-18 31-18 6 0 13 5l65 66 65-65q18-17 48 13 27 27 11 44zm471 57q0 118-46 228-45 105-126 186-80 80-187 126t-228 46-228-46-187-126q-82-82-125-186-15-33-15-40h-1q-9-27 43-44 50-16 60 12 37 99 97 167h1v-341q3-136 102-232 105-103 253-103 147 0 251 103t104 249q0 147-104.5 251t-250.5 104q-58 0-112-16-28-11-13-61 16-51 44-43l14 3q14 3 33 6t30 3q104 0 176-71.5t72-174.5q0-101-72-171-71-71-175-71-107 0-178 80-64 72-64 160v413q110 67 242 67 96 0 185-36.5t156-103.5 103.5-155 36.5-183q0-198-141-339-140-140-339-140-200 0-340 140-53 53-77 87l-2 2q-8 11-13 15.5t-21.5 9.5-38.5-3q-21-5-36.5-16.5t-15.5-26.5v-680q0-15 10.5-26.5t27.5-11.5h877q30 0 30 55t-30 55h-811v483h1q40-42 102-84t108-61q109-46 231-46 121 0 228 46t187 126q81 81 126 186 46 112 46 229zm-31-581q9 8 9 18t-5.5 18-16.5 21q-26 26-39 26-9 0-16-7-106-91-207-133-128-56-276-56-133 0-262 49-27 10-45-37-9-25-8-38 3-16 16-20 130-57 299-57 164 0 316 64 137 58 235 152z"/>
         </svg>
diff --git a/layouts/partials/footer_email.html b/layouts/partials/footer_email.html
index 0e73551..5bfc267 100644
--- a/layouts/partials/footer_email.html
+++ b/layouts/partials/footer_email.html
@@ -1,5 +1,8 @@
 {{ if .Site.Params.email }}
-    <a href="mailto:{{ .Site.Params.email }}" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="mailto:{{ .Site.Params.email }}"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="Email">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16">
             <path d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"/>
         </svg>
diff --git a/layouts/partials/footer_facebook.html b/layouts/partials/footer_facebook.html
index 884fc95..8467c24 100644
--- a/layouts/partials/footer_facebook.html
+++ b/layouts/partials/footer_facebook.html
@@ -1,5 +1,9 @@
 {{ if .Site.Params.facebook }}
-    <a href="https://facebook.com/{{ .Site.Params.facebook }}" target="_blank" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="https://facebook.com/{{ .Site.Params.facebook }}"
+        target="_blank"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="Facebook">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266.893 266.895">
             <path fill="#ffffff" d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812  c0-7.857-6.368-14.224-14.223-14.224H18.812c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225  H248.082z" />
             <path d="M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935  l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585  v99.803H182.409z" />
diff --git a/layouts/partials/footer_github.html b/layouts/partials/footer_github.html
index bd7188b..16a7b73 100644
--- a/layouts/partials/footer_github.html
+++ b/layouts/partials/footer_github.html
@@ -1,5 +1,9 @@
 {{ if .Site.Params.github }}
-    <a href="https://github.com/{{ .Site.Params.github }}" target="_blank" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="https://github.com/{{ .Site.Params.github }}"
+        target="_blank"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="GitHub">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
             <path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8"/>
         </svg>
diff --git a/layouts/partials/footer_gitlab.html b/layouts/partials/footer_gitlab.html
index 6929f4d..84a1751 100644
--- a/layouts/partials/footer_gitlab.html
+++ b/layouts/partials/footer_gitlab.html
@@ -1,5 +1,9 @@
 {{ if .Site.Params.gitlab }}
-    <a href="https://gitlab.com/{{ .Site.Params.gitlab }}" target="_blank" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="https://gitlab.com/{{ .Site.Params.gitlab }}"
+        target="_blank"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="GitLab">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792">
             <path d="M104 706l792 1015-868-630q-18-13-25-34.5t0-42.5l101-308zm462 0h660l-330 1015zm-198-612l198 612h-462l198-612q8-23 33-23t33 23zm1320 612l101 308q7 21 0 42.5t-25 34.5l-868 630 792-1015zm0 0h-462l198-612q8-23 33-23t33 23z"/>
         </svg>
diff --git a/layouts/partials/footer_linkedin.html b/layouts/partials/footer_linkedin.html
index 92b7e8e..5b46f81 100644
--- a/layouts/partials/footer_linkedin.html
+++ b/layouts/partials/footer_linkedin.html
@@ -1,5 +1,9 @@
 {{ if .Site.Params.linkedin }}
-    <a href="https://www.linkedin.com/in/{{ .Site.Params.linkedin }}" target="_blank" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="https://www.linkedin.com/in/{{ .Site.Params.linkedin }}"
+        target="_blank"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="Linkedin">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
             <path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51v1.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/>
         </svg>
diff --git a/layouts/partials/footer_mastodon.html b/layouts/partials/footer_mastodon.html
index 28c34cf..68a58ad 100644
--- a/layouts/partials/footer_mastodon.html
+++ b/layouts/partials/footer_mastodon.html
@@ -1,5 +1,9 @@
 {{ if .Site.Params.mastodon_url }}
-    <a rel="me" href="{{ .Site.Params.mastodon_url }}" target="_blank" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a rel="me" href="{{ .Site.Params.mastodon_url }}"
+        target="_blank"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="Mastodon">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976">
             <path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
             <path fill="#fff" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
diff --git a/layouts/partials/footer_rss.html b/layouts/partials/footer_rss.html
index f2715cf..bbf2259 100644
--- a/layouts/partials/footer_rss.html
+++ b/layouts/partials/footer_rss.html
@@ -1,5 +1,8 @@
 {{ if .Site.RSSLink }}
-    <a href="{{ .Site.RSSLink }}" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="{{ .Site.RSSLink }}"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="RSS">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
             <path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194 11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0 13.806c0-1.21.983-2.195 2.194-2.195zM10.606 16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"/>
         </svg>
diff --git a/layouts/partials/footer_telegram.html b/layouts/partials/footer_telegram.html
index 7addb80..71be30b 100644
--- a/layouts/partials/footer_telegram.html
+++ b/layouts/partials/footer_telegram.html
@@ -1,5 +1,9 @@
 {{ if .Site.Params.telegram }}
-    <a href="https://t.me/{{ .Site.Params.telegram }}" target="_blank" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="https://t.me/{{ .Site.Params.telegram }}"
+        target="_blank"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="Telegram">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
             <circle cx="120" cy="120" r="120"/>
             <path fill="#c8daea" d="m98 175c-3.8876 0-3.227-1.4679-4.5678-5.1695L82 132.2059 170 80"/>
diff --git a/layouts/partials/footer_twitter.html b/layouts/partials/footer_twitter.html
index 7079ab2..d5a8b68 100644
--- a/layouts/partials/footer_twitter.html
+++ b/layouts/partials/footer_twitter.html
@@ -1,5 +1,9 @@
 {{ if .Site.Params.twitter }}
-    <a href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" class="mx-1 ml-md-2 mr-md-0 icon">
+    <a href="https://twitter.com/{{ .Site.Params.twitter }}"
+        target="_blank"
+        class="mx-1 ml-md-2 mr-md-0 icon"
+        aria-label="Twitter">
+
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
             <path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/>
         </svg>
diff --git a/layouts/partials/icon_back.html b/layouts/partials/icon_back.html
new file mode 100644
index 0000000..a3d63f8
--- /dev/null
+++ b/layouts/partials/icon_back.html
@@ -0,0 +1,5 @@
+<span class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175">
+        <path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z" />
+    </svg>
+</span>
diff --git a/layouts/partials/icon_next.html b/layouts/partials/icon_next.html
new file mode 100644
index 0000000..da6196c
--- /dev/null
+++ b/layouts/partials/icon_next.html
@@ -0,0 +1,5 @@
+<span class="icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175">
+        <path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5 c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z" />
+    </svg>
+</span>
diff --git a/static/css/main.css b/static/css/main.css
index 88eaf85..7f75d7e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -236,9 +236,19 @@ h6 {
     min-width: 100px;
 }
 
+.content .navigation .icon,
+.content .navigation .text {
+    height: 24px;
+}
+
 .content .navigation .icon {
+    display: inline-block;
+    fill: currentColor;
     width: 16px;
-    height: 16px;
+}
+
+.content .navigation .text {
+    vertical-align: middle;
 }
 
 /* Partial: Footer */
diff --git a/static/img/back.svg b/static/img/back.svg
deleted file mode 100644
index 4d26923..0000000
--- a/static/img/back.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>

-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

-	 viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">

-<g>

-	<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225

-		c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-</svg>

diff --git a/static/img/next.svg b/static/img/next.svg
deleted file mode 100644
index 3829cf2..0000000
--- a/static/img/next.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>

-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

-	 viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">

-<g>

-	<path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5

-		c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z

-		"/>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-</svg>