[FEATURE] add links to access main-nav and content directly (#321)

Links will be visible only on focus, especially useful for only keyboard users
t3kit · Nov 23, 2017 · 299ca0b · 299ca0b
1 parent 6257544
commit 299ca0b
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 2 deletions.
diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
@@ -13,6 +13,12 @@
 			<trans-unit id="bootstrapCarousel.ariaLabel.control">
 				<target>Zeige Bild %1$s von %2$s</target>
 			</trans-unit>
+			<trans-unit id="skipLinks.mainNav" xml:space="preserve">
+				<target>Direkt zur Hauptnavigation springen</target>
+			</trans-unit>
+			<trans-unit id="skipLinks.mainContent" xml:space="preserve">
+				<target>Direkt zum Inhalt springen</target>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>
diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -24,6 +24,11 @@
 			</trans-unit>
 			<trans-unit id="metaNavigation.ariaLabel" xml:space="preserve">
 				<source>Meta navigation</source>
+			<trans-unit id="skipLinks.mainNav" xml:space="preserve">
+				<source>Skip to main navigation</source>
+			</trans-unit>
+			<trans-unit id="skipLinks.mainContent" xml:space="preserve">
+				<source>Skip to main content</source>
 			</trans-unit>
 
 

diff --git a/Resources/Private/Layouts/Default.html b/Resources/Private/Layouts/Default.html
@@ -3,6 +3,14 @@
 <!--[if lte IE 9]>
 	<p class="browsehappy"><f:translate extensionName="theme_t3kit" key="content.behaviour.browsehappy.message" /><a href="http://browsehappy.com/"><f:translate extensionName="theme_t3kit" key="content.behaviour.browsehappy.link" /></a></p>
 <![endif]-->
+<div class="skip-links">
+	<f:link.typolink parameter="{page.uid}#main-navigation" class="skip-links__item sr-only sr-only-focusable">
+		<f:translate key="skipLinks.mainNav" extensionName="theme_t3kit"/>
+	</f:link.typolink>
+	<f:link.typolink parameter="{page.uid}#main-content" class="skip-links__item sr-only sr-only-focusable">
+		<f:translate key="skipLinks.mainContent" extensionName="theme_t3kit"/>
+	</f:link.typolink>
+</div>
 
 <f:render partial="Header/{theme:constant(constant:'themes.configuration.header.headerTemplate')}" section="Default" arguments="{_all}" />
 <f:render section="Default" />

diff --git a/Resources/Private/Partials/Content/Main.html b/Resources/Private/Partials/Content/Main.html
@@ -4,7 +4,9 @@
 	<!-- theme_t3kit: Partials/Content/Main.html [begin] -->
 
 	<!--TYPO3SEARCH_begin-->
-		<f:cObject typoscriptObjectPath="lib.content.main" />
+		<div id="main-content">
+			<f:cObject typoscriptObjectPath="lib.content.main" />
+		</div>
 	<!--TYPO3SEARCH_end-->
 
 	<!-- theme_t3kit: Partials/Content/Main.html [end] -->

diff --git a/Resources/Private/Partials/Header/Header.html b/Resources/Private/Partials/Header/Header.html
@@ -85,7 +85,7 @@
 		</f:if>
 	</f:if>
 
-	<nav class="main-navigation js__main-navigation{f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.dropdownColumns\')} == 1', then: ' _dropdown-menu-with-columns js__dropdown-menu-with-columns')}">
+	<nav id="main-navigation" class="main-navigation js__main-navigation{f:if(condition: '{theme:constant(constant:\'themes.configuration.menu.main.dropdownColumns\')} == 1', then: ' _dropdown-menu-with-columns js__dropdown-menu-with-columns')}">
 		<div class="main-navigation__items-wrp js__navigation__items-wrp">
 			<f:if condition="{theme:constant(constant:'themes.configuration.menu.main.enableLogoInNavigation')}">
 				<div class="main-navigation__logo">

diff --git a/felayout_t3kit/dev/styles/main.less b/felayout_t3kit/dev/styles/main.less
@@ -10,6 +10,7 @@
 @import "main/iconFont.less";
 
 // HEADER
+@import "main/header/skipLinks.less";
 @import "main/header/header.less";
 
 // FOOTER

diff --git a/felayout_t3kit/dev/styles/main/header/skipLinks.less b/felayout_t3kit/dev/styles/main/header/skipLinks.less
@@ -0,0 +1,11 @@
+.skip-links {
+    text-align: center;
+    background-color: @nav-background-color;
+    line-height: @nav-height;
+}
+
+.skip-links__item {
+    &:focus {
+        color: @nav-link-color;
+    }
+}