Adds a "Skip to main content" link.

- Adds link at top of page with styles to appear when focused - Changes role="main" to a <main> and adds an id to link to - Moves 'copy-banner' and 'billboard' inside <main> so they are not bypassed when skipping the nav
django · Jun 1, 2023 · 8d317a2 · 8d317a2
1 parent 1b2823b
commit 8d317a2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
@@ -3609,3 +3609,18 @@ ul.corporate-members li {
         justify-content: space-between;
     }
 }
+
+.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
@@ -62,17 +62,19 @@
 
   <body id="{% block sectionid %}generic{% endblock %}" class="{% block body_class %}{% endblock %}">
 
-    {% include "includes/header.html" %}
+    <a href="#main-content" class="skip-link">Skip to main content</a>
 
-    <div class="copy-banner">
-      <div class="container {% block header-classes %}{% endblock %}">
-        {% block header %}{% endblock %}
-      </div>
-    </div>
-    <div id="billboard">{% block billboard %}{% endblock %}</div>
+    {% include "includes/header.html" %}
 
     <div class="container {% block layout_class %}{% endblock %}">
-      <div role="main">
+      <main id="main-content">
+        <div class="copy-banner">
+          <div class="container {% block header-classes %}{% endblock %}">
+            {% block header %}{% endblock %}
+          </div>
+        </div>
+
+        <div id="billboard">{% block billboard %}{% endblock %}</div>
 
         {% block messages %}
           {% if messages %}
@@ -89,7 +91,7 @@
 
         {% block content %}{% endblock %}
         <a href="#top" class="backtotop"><i class="icon icon-chevron-up"></i> Back to Top</a>
-      </div>
+      </main>
 
       {% block content-related %}{% endblock %}
       {% block content-extra %}{% endblock %}