introduce first 'Skip to content' button

core/css/header.css

@@ -7,6 +7,22 @@
 	-ms-user-select: none;
 }
 
+#skip-to-content a {
+	position: absolute;
+	left: -10000px;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+#skip-to-content a:focus {
+	left: 76px;
+	top: -9px;
+	color: #fff;
+	width: auto;
+	height: auto;
+}
+
 
 
 /* HEADERS ------------------------------------------------------------------ */

core/templates/layout.user.php

@@ -40,14 +40,16 @@
 		<?php endif; ?>
 	</div>
 	<header><div id="header">
-			<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud">
+			<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
+				title="" id="owncloud" tabindex="-1">
 				<div class="logo-icon svg">
 					<h1 class="hidden-visually">
 						<?php p($theme->getName()); ?>
 					</h1>
 				</div>
 			</a>
-			<a href="#" class="menutoggle" tabindex="1">
+
+			<a href="#" class="menutoggle" tabindex="2">
 				<h1 class="header-appname">
 					<?php
 						if(OC_Util::getEditionString() === '') {
@@ -59,9 +61,14 @@
 				</h1>
 				<div class="icon-caret svg"></div>
 			</a>
+
+			<div id="skip-to-content">
+				<a href="#app-content" tabindex="1"><?php p($l->t('Skip to content')); ?></a>
+			</div>
+
 			<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 			<div id="settings" class="svg">
-				<div id="expand" tabindex="3" role="link">
+				<div id="expand" tabindex="4" role="link">
 					<?php if ($_['enableAvatars']): ?>
 					<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown"'); } else { print_unescaped('" style="display: none"'); } ?>>
 						<?php if ($_['userAvatarSet']): ?>
@@ -100,7 +107,7 @@
 				</label>
 				<input id="searchbox" class="svg" type="search" name="query"
 					value="<?php if(isset($_POST['query'])) {p($_POST['query']);};?>"
-					autocomplete="off" tabindex="2" />
+					autocomplete="off" tabindex="3" />
 			</form>
 		</div></header>