♿ main content link

2025-11-14 18:47:02 +10:00
parent f31383800e
commit 04fa2073a6
2 changed files with 26 additions and 1 deletions
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -78,6 +78,28 @@ body {
    border-width: 0;
 }

+/* Skip to main content link - hidden until focused */
+.skip-to-main {
+    position: absolute;
+    top: -100px;
+    left: 0;
+    z-index: 9999;
+    padding: var(--space-md) var(--space-lg);
+    background-color: var(--color-primary);
+    color: var(--color-background);
+    text-decoration: none;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-tight);
+    border: var(--border-width-thick) solid var(--color-primary);
+}
+
+.skip-to-main:focus {
+    top: 0;
+    outline: 3px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 /* Focus indicators for accessibility */
 a:focus,
 button:focus,
--- a/templates/base.html
+++ b/templates/base.html
@@ -33,6 +33,9 @@
    {% block extra_css %}{% endblock %}
 </head>
 <body>
+    <!-- Skip to main content link for keyboard navigation -->
+    <a href="#main-content" class="skip-to-main">Skip to main content</a>
+
    {% if header_image %}
    <div class="site-header-image">
        <img src="{{ url_for('static', filename='images/' + header_image) }}" alt="{{ comic_name }} Header">
@@ -77,7 +80,7 @@
        </nav>
    </header>

-    <main>
+    <main id="main-content">
        <div class="container">
            {% block content %}{% endblock %}
        </div>