skip to main (#2054)

moshe742 · devanubis · web-flow · commit 01a6e536847d · 2025-05-25T21:06:59.000+02:00
* skip to main

* add the actual link

* Update _style.scss

* moved the id to main tag

---------

Co-authored-by: Howard Cox &lt;dev.anubis@gmail.com&gt;
diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
@@ -3631,3 +3631,19 @@ ul.corporate-members li {
         }
     }
 }
+
+// added for skip to main functionality
+.skip-link {
+    position: absolute;
+    top: -5em;
+    z-index: 1;
+    background: var(--body-bg);
+    color: var(--link-color);
+    border: 0.5em solid var(--primary);
+    padding: 0.5em 2em;
+    transition: top 0.5s ease-out;
+
+    &:focus {
+        top: 0;
+    }
+}
diff --git a/djangoproject/templates/base.html b/djangoproject/templates/base.html
@@ -47,6 +47,7 @@
 
   <body id="{% block sectionid %}generic{% endblock %}" class="{% block body_class %}{% endblock %}">
 
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     {% include "includes/header.html" %}
 
     <section class="copy-banner">
@@ -72,7 +73,7 @@
     <div id="billboard">{% block billboard %}{% endblock %}</div>
 
     <div class="container {% block layout_class %}{% endblock %}">
-      <main>
+      <main id="main-content">
 
         {% block messages %}
           {% if messages %}
