Added "jump to content" accessibility button/skip-link

This commit is contained in:
2025-10-05 19:52:52 +02:00
parent 1608aa31da
commit f3fc91a3e7
3 changed files with 17 additions and 2 deletions

View File

@@ -13,6 +13,9 @@
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, ...</value> <value>System.Resources.ResXResourceWriter, System.Windows.Forms, ...</value>
</resheader> </resheader>
<data name="Jump to content" xml:space="preserve">
<value>Zum Inhalt springen</value>
</data>
<data name="Home" xml:space="preserve"> <data name="Home" xml:space="preserve">
<value>Startseite</value> <value>Startseite</value>
</data> </data>

View File

@@ -14,6 +14,7 @@
<body data-bs-theme="dark"> <body data-bs-theme="dark">
<header> <header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar bg border-bottom box-shadow mb-3"> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar bg border-bottom box-shadow mb-3">
<a href="#main-content" class="skip-link btn btn-primary">@T["Jump to content"]</a>
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Berufsschule_HAM</a> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Berufsschule_HAM</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
@@ -23,7 +24,7 @@
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1"> <ul class="navbar-nav flex-grow-1">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Index">Home</a> <a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Index">@T["Home"]</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
@if (User.Identity.IsAuthenticated) @if (User.Identity.IsAuthenticated)
@@ -41,7 +42,7 @@
</nav> </nav>
</header> </header>
<div class="container"> <div class="container">
<main role="main" class="pb-3"> <main id="main-content" role="main" class="pb-3">
@RenderBody() @RenderBody()
</main> </main>
</div> </div>

View File

@@ -46,3 +46,14 @@ button.accept-policy {
white-space: nowrap; white-space: nowrap;
line-height: 60px; line-height: 60px;
} }
.skip-link {
position: fixed;
left: -10000px;
z-index: 1000;
}
.skip-link:focus {
left: 10px;
top: 10px;
outline: none;
}