Add skip links for accessibility

7 files changed, 48 insertions, 36 deletions

diff --git a/templates/index.html b/templates/index.html
index 7370d21..7a7d753 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,36 +5,38 @@
 {% block title_class %} p-name fn{% endblock %}
 
 {% block main %}
-  <div>
-    {{ section.content | safe }}
-  </div>
-  <section>
-    <h2>Latest Posts</h2>
-    <ul class="h-feed">
-      {%- set section = get_section(path="post/_index.md") %}
-      {%- for page in section.pages | slice(end=3) %}
-        <li class="h-entry">
-          <time class="dt-published" datetime="{{ page.date | date(format="%+") }}">{{ page.date | date(format=config.extra.date_format) }}</time>
-          <a class="u-url p-name" href="{{ page.path | safe }}">{{ page.title }}</a>
-        </li>
-      {%- endfor %}
-    </ul>
-  </section>
-  <section>
-    <h2>Elsewhere on the Internet</h2>
-    <ul>
-      {%- for item in config.extra.contact_menu %}
-        <li>
-          {%- if item.url is starting_with("mailto:") %}
-            <a href="{{ item.url | safe }}" class="u-email email" rel="me">{{ item.name }}</a>
-          {%- else %}
-            <a href="{{ item.url | safe }}" class="u-url url" rel="me">{{ item.name }}</a>
-          {%- endif %}
-        </li>
-      {%- endfor %}
-    </ul>
-  </section>
-  <footer>
-    GPG Key: <a href="{{ config.extra.gpg_url | safe }}" rel="u-key key">{{ config.extra.gpg_fingerprint }}</a>
-  </footer>
+  <main id="content">
+    <div>
+      {{ section.content | safe }}
+    </div>
+    <section>
+      <h2>Latest Posts</h2>
+      <ul class="h-feed">
+        {%- set section = get_section(path="post/_index.md") %}
+        {%- for page in section.pages | slice(end=3) %}
+          <li class="h-entry">
+            <time class="dt-published" datetime="{{ page.date | date(format="%+") }}">{{ page.date | date(format=config.extra.date_format) }}</time>
+            <a class="u-url p-name" href="{{ page.path | safe }}">{{ page.title }}</a>
+          </li>
+        {%- endfor %}
+      </ul>
+    </section>
+    <section>
+      <h2>Elsewhere on the Internet</h2>
+      <ul>
+        {%- for item in config.extra.contact_menu %}
+          <li>
+            {%- if item.url is starting_with("mailto:") %}
+              <a href="{{ item.url | safe }}" class="u-email email" rel="me">{{ item.name }}</a>
+            {%- else %}
+              <a href="{{ item.url | safe }}" class="u-url url" rel="me">{{ item.name }}</a>
+            {%- endif %}
+          </li>
+        {%- endfor %}
+      </ul>
+    </section>
+    <footer>
+      GPG Key: <a href="{{ config.extra.gpg_url | safe }}" rel="u-key key">{{ config.extra.gpg_fingerprint }}</a>
+    </footer>
+  </main>
 {% endblock %}
diff --git a/themes/bear/templates/header.html b/themes/bear/templates/header.html
index 90d5a7e..d08ea29 100644
--- a/themes/bear/templates/header.html
+++ b/themes/bear/templates/header.html
@@ -1,3 +1,4 @@
+<a class="skip" href="#content">Skip to main content</a>
 <header>
   <h2>
     <a href="{{ config.base_url }}" class="title">
diff --git a/themes/bear/templates/page.html b/themes/bear/templates/page.html
index 89de955..996f229 100644
--- a/themes/bear/templates/page.html
+++ b/themes/bear/templates/page.html
@@ -15,7 +15,7 @@
       </p>
     {%- endif %}
   {%- endif %}
-  <main>
+  <main id="content">
     {{ page.content | safe }}
   </main>
   <p>
diff --git a/themes/bear/templates/section.html b/themes/bear/templates/section.html
index e596ffb..838e001 100644
--- a/themes/bear/templates/section.html
+++ b/themes/bear/templates/section.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block main %}
-  <main>
+  <main id="content">
     {%- if taxonomy.term %}
       <h3 style="margin-bottom:0">Filtering for "{{ section.title }}"</h3>
       <small>
diff --git a/themes/bear/templates/style.html b/themes/bear/templates/style.html
index b242914..9015890 100644
--- a/themes/bear/templates/style.html
+++ b/themes/bear/templates/style.html
@@ -12,6 +12,15 @@
     color: #444;
   }
 
+  .skip {
+    position: absolute;
+    top: -3em;
+    background: #fff;
+  }
+  .skip:focus {
+    top: 0;
+  }
+
   h1,
   h2,
   h3,
diff --git a/themes/bear/templates/taxonomy_list.html b/themes/bear/templates/taxonomy_list.html
index 69d9fa2..abf4294 100644
--- a/themes/bear/templates/taxonomy_list.html
+++ b/themes/bear/templates/taxonomy_list.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block main %}
-  <main>
+  <main id="content">
     <small>
       <div>
         {% set tags = get_taxonomy(kind="tags") %}
diff --git a/themes/bear/templates/taxonomy_single.html b/themes/bear/templates/taxonomy_single.html
index c252440..95962a4 100644
--- a/themes/bear/templates/taxonomy_single.html
+++ b/themes/bear/templates/taxonomy_single.html
@@ -6,7 +6,7 @@
 {%- endblock -%}
 
 {% block main %}
-  <main>
+  <main id="content">
     {%- if taxonomy.term %}
       <h3 style="margin-bottom:0">Filtering for "{{ term.name }}"</h3>
       <small>