chore: add a skip to content link

2 files changed, 3 insertions, 1 deletions

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 8c5570f..35e7d27 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -3,6 +3,7 @@ import Footer from '@components/Footer/Footer';
 import Header from '@components/Header/Header';
 import Main from '@components/Main/Main';
 import Breadcrumb from '@components/Breadcrumb/Breadcrumb';
+import { t } from '@lingui/macro';
 
 const Layout = ({
   children,
@@ -13,6 +14,7 @@ const Layout = ({
 }) => {
   return (
     <>
+      <a href="#main" className="screen-reader-text">{t`Skip to content`}</a>
       <Header isHome={isHome} />
       <Main>{children}</Main>
       <Footer />
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index cc47443..8b2e822 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -3,7 +3,7 @@ import styles from './Main.module.scss';
 
 const Main: FunctionComponent = ({ children }) => {
   return (
-    <main className={styles.wrapper}>
+    <main id="main" className={styles.wrapper}>
       <div className={styles.body}>{children}</div>
     </main>
   );