diff options
| author | Morris Jobke <hey@morrisjobke.de> | 2018-06-26 16:11:19 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-06-26 16:11:19 +0200 |
| commit | d9d557a5ef31d63a8807feac1c530c36a077607f (patch) | |
| tree | ea619a4d41f9dd32c4e46cc44e9991ca7c7e6714 | |
| parent | cfb50fdeaf6df4be2b3984aef43b2010743a66c1 (diff) | |
| parent | de5d5ee0e7fcc1ad29bf8c6cfeac2aa987557740 (diff) | |
| download | nextcloud-server-d9d557a5ef31d63a8807feac1c530c36a077607f.tar.gz nextcloud-server-d9d557a5ef31d63a8807feac1c530c36a077607f.zip | |
Merge pull request #10004 from nextcloud/accessibility-skip
Add skip navigation / skip to content links for accessibility
| -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> |