diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php
index d4508c3c7..1861869e3 100644
--- a/resources/lang/en/common.php
+++ b/resources/lang/en/common.php
@@ -60,6 +60,7 @@ return [
'no_activity' => 'No activity to show',
'no_items' => 'No items available',
'back_to_top' => 'Back to top',
+ 'skip_to_main_content' => 'Skip to main content',
'toggle_details' => 'Toggle Details',
'toggle_thumbnails' => 'Toggle Thumbnails',
'details' => 'Details',
diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index 37f39a4f7..582bf7c75 100644
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -136,6 +136,23 @@ $btt-size: 40px;
}
}
+.skip-to-content-link {
+ position: fixed;
+ top: -$-xxl;
+ left: 0;
+ background-color: #FFF;
+ z-index: 15;
+ border-radius: 0 4px 4px 0;
+ display: block;
+ box-shadow: $bs-dark;
+ font-weight: bold;
+ &:focus {
+ top: $-xl;
+ outline-offset: -10px;
+ outline: 2px dotted var(--color-primary);
+ }
+}
+
.contained-search-box {
display: flex;
height: 38px;
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index 66604345f..0734466be 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -28,6 +28,7 @@
</head>
<body class="@yield('body-class')">
+ @include('common.parts.skip-to-content')
@include('partials.notifications')
@include('common.header')
diff --git a/resources/views/common/parts/skip-to-content.blade.php b/resources/views/common/parts/skip-to-content.blade.php
new file mode 100644
index 000000000..b63573d76
--- /dev/null
+++ b/resources/views/common/parts/skip-to-content.blade.php
@@ -0,0 +1 @@
+<a class="px-m py-s skip-to-content-link" href="#main-content">{{ trans('common.skip_to_main_content') }}</a>
\ No newline at end of file
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
index d06ddbc57..ad759b49d 100644
--- a/resources/views/errors/500.blade.php
+++ b/resources/views/errors/500.blade.php
@@ -5,7 +5,7 @@
<div class="container small py-xl">
<main class="card content-wrap auto-height">
- <div class="body">
+ <div id="main-content" class="body">
<h3>{{ trans('errors.error_occurred') }}</h3>
<h5 class="mb-m">{{ $message ?? 'An unknown error occurred' }}</h5>
<p><a href="{{ url('/') }}" class="button outline">{{ trans('errors.return_home') }}</a></p>
diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php
index f580b06cf..2120bddb2 100644
--- a/resources/views/pages/edit.blade.php
+++ b/resources/views/pages/edit.blade.php
@@ -8,7 +8,7 @@
@section('content')
- <div class="flex-fill flex fill-height">
+ <div id="main-content" class="flex-fill flex fill-height">
<form action="{{ $page->getUrl() }}" autocomplete="off" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
{{ csrf_field() }}
diff --git a/resources/views/simple-layout.blade.php b/resources/views/simple-layout.blade.php
index a57aaebef..b7d6d3ccd 100644
--- a/resources/views/simple-layout.blade.php
+++ b/resources/views/simple-layout.blade.php
@@ -4,7 +4,7 @@
<div class="flex-fill flex">
<div class="content flex">
- <div class="scroll-body">
+ <div id="main-content" class="scroll-body">
@yield('body')
</div>
</div>
diff --git a/resources/views/tri-layout.blade.php b/resources/views/tri-layout.blade.php
index dc4115f29..d985db649 100644
--- a/resources/views/tri-layout.blade.php
+++ b/resources/views/tri-layout.blade.php
@@ -34,7 +34,7 @@
</div>
<div class="@yield('body-wrap-classes') tri-layout-middle">
- <div class="tri-layout-middle-contents">
+ <div id="main-content" class="tri-layout-middle-contents">
@yield('body')
</div>
</div>