diff --git a/bakerydemo/static/css/main.css b/bakerydemo/static/css/main.css
index 2987eab..106de47 100644
--- a/bakerydemo/static/css/main.css
+++ b/bakerydemo/static/css/main.css
@@ -455,6 +455,18 @@ blockquote .attribute-name {
   z-index: 10;
 }
 
+.skip-link {
+  z-index: 20;
+  position: absolute;
+  top: -100%;
+  padding: 20px;
+  background-color: var(--white);
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
 .index-header__title {
   color: var(--dark);
   font-weight: 400;
diff --git a/bakerydemo/templates/base.html b/bakerydemo/templates/base.html
index 05e063e..2313520 100755
--- a/bakerydemo/templates/base.html
+++ b/bakerydemo/templates/base.html
@@ -41,7 +41,7 @@
         {% endblock breadcrumbs %}
 
 
-        <main>
+        <main id="main-content">
             {% block messages %}
                 {% include "includes/messages.html" %}
             {% endblock messages %}
diff --git a/bakerydemo/templates/includes/header.html b/bakerydemo/templates/includes/header.html
index 6d59731..8c547bc 100644
--- a/bakerydemo/templates/includes/header.html
+++ b/bakerydemo/templates/includes/header.html
@@ -1,6 +1,7 @@
 {% load navigation_tags %}
 
 <header class="header clearfix">
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <div class="container">
         <div class="navigation" data-navigation>
             <a href="/" class="navigation__logo">The Wagtail Bakery</a>