diff options
| -rw-r--r-- | core/css/header.scss | 21 | ||||
| -rw-r--r-- | core/templates/layout.user.php | 4 |
2 files changed, 25 insertions, 0 deletions
diff --git a/core/css/header.scss b/core/css/header.scss index fdb2bb24e1f..e218f86fa9b 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 596f958341c..26669f4a573 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> |