Add skip-link (#504)

wagtail · Sep 6, 2024 · 0e71443 · 0e71443
1 parent b93091c
commit 0e71443
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>