m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mischa
2026-06-20 20:19:27 +02:00
parent ffcf156289
commit a7786f263f
2 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+24
View File
@@ -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 { :focus-visible {
outline: 2px solid var(--color-accent); outline: 2px solid var(--color-accent);
outline-offset: 2px; outline-offset: 2px;
themes/intotheeast/templates/partials/base.html.twig
+2 -1
View File
@@ -13,6 +13,7 @@
{{ assets.js()|raw }} {{ assets.js()|raw }}
</head> </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 %}"> <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"> <header class="site-header">
<a class="site-title" href="{{ base_url_absolute }}">into the east</a> <a class="site-title" href="{{ base_url_absolute }}">into the east</a>
{% block nav %} {% block nav %}
@@ -22,7 +23,7 @@
</nav> </nav>
{% endblock %} {% endblock %}
</header> </header>
<main class="site-main"> <main class="site-main" id="main-content">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
{{ assets.js('bottom')|raw }} {{ assets.js('bottom')|raw }}