Adding skip link

Author: dcooney

components/common/Layout.js

@@ -55,7 +55,7 @@ export default function Layout({children, seo, hasJsonLd}) {
       )}
       <Meta />
       <Header />
-      <main>{children}</main>
+      <main id="page-content">{children}</main>
       <Footer social={seo?.social} siteTitle={seo?.siteTitle} />
     </>
   )

components/organisms/Header/Header.js

@@ -18,24 +18,29 @@ import styles from './Header.module.css'
 export default function Header() {
   const {menus} = useContext(MenuContext)
   return (
-    <header className={styles.header}>
-      <Container paddingTop={false} paddingBtm={false}>
-        <div className={styles.search}>
-          <AlgoliaSearch
-            useHistory={true}
-            usePlaceholder={true}
-            className="ml-auto"
-          />
-        </div>
-        <div className={styles.navigation}>
-          <Logo />
-          <Navigation
-            menu={menus?.primary_menu}
-            styles={styles}
-            className={styles.primaryMenu}
-          />
-        </div>
-      </Container>
-    </header>
+    <>
+      <a className={styles.skip} href="#page-content">
+        Skip to Main Content
+      </a>
+      <header className={styles.header}>
+        <Container paddingTop={false} paddingBtm={false}>
+          <div className={styles.search}>
+            <AlgoliaSearch
+              useHistory={true}
+              usePlaceholder={true}
+              className="ml-auto"
+            />
+          </div>
+          <div className={styles.navigation}>
+            <Logo />
+            <Navigation
+              menu={menus?.primary_menu}
+              styles={styles}
+              className={styles.primaryMenu}
+            />
+          </div>
+        </Container>
+      </header>
+    </>
   )
 }

components/organisms/Header/Header.module.css

@@ -9,3 +9,19 @@
     @apply flex items-center justify-between;
   }
 }
+
+.skip {
+  @apply absolute text-sm p-2;
+
+  top: -200px;
+  left: -200px;
+  z-index: 9999;
+  background: #fff;
+
+  &:focus {
+    @apply visible opacity-100;
+
+    top: 10px;
+    left: 10px;
+  }
+}

pages/_app.js

@@ -1,5 +1,6 @@
 import {useApollo} from '@/api/apolloConfig'
 import '@/styles/index.css'
+import '@/styles/demo.css'
 import {ApolloProvider} from '@apollo/client'
 import {DefaultSeo} from 'next-seo'
 import Error from 'next/error'

styles/demo.css

@@ -0,0 +1,5 @@
+#page-content {
+  h1 {
+    @apply text-xl font-semibold;
+  }
+}