Add a 'skip to main content' for VoiceOver users

alexwlchan · Oct 12, 2022 · 342018f · 342018f
1 parent 6eebe33
commit 342018f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 21 deletions.
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -7,10 +7,14 @@
 
   {% include head.html %}
 
+  <a class="skip-main" href="#main">Skip to main content</a>
+
   <body>
     {% include header.html %}
 
-    {{ content }}
+    <main id="main" tabIndex="-1">
+      {{ content }}
+    </main>
 
     {% include footer.html %}
   </body>

diff --git a/src/_layouts/page.html b/src/_layouts/page.html
@@ -1,25 +1,23 @@
 ---
 layout: default
 ---
-<main>
-  {% if page.title != "" %}
-  <h1 class="title">
-    <a href="{{ page.url | relative_url }}">{{ page.title | smartify | escape }}</a>
-  </h1>
-  {% endif %}
+{% if page.title != "" %}
+<h1 class="title">
+  <a href="{{ page.url | relative_url }}">{{ page.title | smartify | escape }}</a>
+</h1>
+{% endif %}
 
-  {% if page.date_updated or page.meta %}
-  <div class="page__meta">
-    <ul class="dot_list">
-      {% if page.date_updated %}
-      <li class="page__date">Last updated {{ page.date_updated | date: site.date_format }}</li>
-      {% endif %}
-      {% for m in page.meta %}
-      <li>{{ m }}</li>
-      {% endfor %}
-    </ul>
-  </div>
-  {% endif %}
+{% if page.date_updated or page.meta %}
+<div class="page__meta">
+  <ul class="dot_list">
+    {% if page.date_updated %}
+    <li class="page__date">Last updated {{ page.date_updated | date: site.date_format }}</li>
+    {% endif %}
+    {% for m in page.meta %}
+    <li>{{ m }}</li>
+    {% endfor %}
+  </ul>
+</div>
+{% endif %}
 
-  {{ content | cleanup_text | smartify }}
-</main>
+{{ content | cleanup_text | smartify }}
diff --git a/src/_scss/_links.scss b/src/_scss/_links.scss
@@ -0,0 +1,10 @@
+/* from https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/skip-to-main-content/ */
+a.skip-main {
+  position: absolute;
+  left: -999px;
+  top: auto;
+  width:  1px;
+  height: 1px;
+  overflow :hidden;
+  z-index: -999;
+}
diff --git a/src/_scss/_main.scss b/src/_scss/_main.scss
@@ -4,6 +4,7 @@
 
 @import "_layout.scss";
 @import "_text.scss";
+@import "_links.scss";
 
 // Major page components
 @import "_aside.scss";