feat(a11y): add skip-to-main link and main landmark id

2026-06-20 20:19:27 +02:00
parent ffcf156289
commit a7786f263f
2 changed files with 26 additions and 1 deletions
@@ -780,6 +780,30 @@ body::after {
    }
 }

+.skip-link {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+.skip-link:focus-visible {
+    left: 0;
+    top: 0;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    padding: var(--space-2) var(--space-4);
+    background: var(--color-accent);
+    color: var(--color-accent-on);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    text-decoration: none;
+    z-index: 9999;
+}
+
 :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
@@ -13,6 +13,7 @@
    {{ assets.js()|raw }}
 </head>
 <body class="{% if page.template == 'map' %}map-page{% endif %}{% if page.template == 'home' or page.template == 'trip' %} home-page{% endif %}{% if page.template == 'story' %} template-story{% endif %}">
+    <a class="skip-link" href="#main-content">Skip to main content</a>
    <header class="site-header">
        <a class="site-title" href="{{ base_url_absolute }}">into the east</a>
        {% block nav %}
@@ -22,7 +23,7 @@
        </nav>
        {% endblock %}
    </header>
-    <main class="site-main">
+    <main class="site-main" id="main-content">
        {% block content %}{% endblock %}
    </main>
    {{ assets.js('bottom')|raw }}