diff --git a/core/css/header.scss b/core/css/header.scss
index fdb2bb24e1f916073cb83b91b31ecb0863131cf5..e218f86fa9b04adcd0d6a2102362ebfd82af5852 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -564,3 +564,24 @@ nav[role='navigation'] {
display: none;
}
}
+
+/* Skip navigation links – show only on keyboard focus */
+.skip-navigation {
+ padding: 11px;
+ position: absolute;
+ overflow: hidden;
+ z-index: 1000;
+ top: -999px;
+ left: 3px;
+ /* Force primary color, otherwise too light focused color */
+ background: var(--color-primary) !important;
+
+ &.skip-content {
+ left: 253px;
+ }
+
+ &:focus,
+ &:active {
+ top: 50px;
+ }
+}
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 596f958341cf4790ac0d9dba861fbb124afd931d..26669f4a573edbd249b1db2b9048ff3a33b62e2c 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -27,6 +27,10 @@
</head>
<body id="<?php p($_['bodyid']);?>">
<?php include 'layout.noscript.warning.php'; ?>
+
+ <a href="#app-content" class="button primary skip-navigation skip-content">Skip to main content</a>
+ <a href="#app-navigation" class="button primary skip-navigation">Skip to navigation of app</a>
+
<div id="notification-container">
<div id="notification"></div>
</div>