Merge pull request #10004 from nextcloud/accessibility-skip

Add skip navigation / skip to content links for accessibility
7 years ago · d9d557a5ef
parent cfb50fdeaf de5d5ee0e7
commit d9d557a5ef
2 changed files with 25 additions and 0 deletions
--- 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;
+	}
+}
--- 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>