Merge pull request #19 from CodeWithGroup/feature/skip-link

dangerworm · web-flow · commit ebfea206a1ac · 2020-08-31T18:48:54.000+01:00
feat: adds skip link
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,15 +3,15 @@
 {% include head.html %}
 
 <body>
+    <a class="sr-only sr-only-focusable" href="#page-content">Skip to main content</a>
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WPSF3G7"
                       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
 
     <div id="main-container" class="page-wrapper toggled">
         {% include sidebar.html %}
-        <main role="main" class="page-content">
-            <a name="top"></a>
+        <main role="main" class="page-content" id="page-content">
             <div class="row">
                 <div class="main-logo">
                     <a href="index.html"><img src="./images/keyboard-green.png"></a>
diff --git a/css/style.css b/css/style.css
@@ -45,6 +45,14 @@ a:hover {
     font-size: 115%;
 }
 
+a.sr-only-focusable[href="#page-content"]:focus {
+    position: absolute;
+    left: 50vw;
+    transform: translateX(-50%);
+    top: 0.5em;
+    transition: none;
+}
+
 /* Custom default button */
 .btn-default,
 .btn-default:hover,
