diff --git a/resources/js/keyboardNavigation.js b/resources/js/keyboardNavigation.js
new file mode 100644
index 0000000000000000000000000000000000000000..4b52bc439f20d972846f0012ec2458cc6cf5be59
--- /dev/null
+++ b/resources/js/keyboardNavigation.js
@@ -0,0 +1,49 @@
+var ctrlInfo = false;       // Flag used for checking if the user was shown the keyboard control information
+var currentResultIndex = 1; // stores result which was focused last
+
+document.onkeydown = checkKey;
+function checkKey(e) {
+    e = e || window.event;
+// Check for TAB keypress
+    if (e.keyCode == '9') {
+        e.preventDefault();
+        tabKeyPressed($(document.activeElement));
+    }
+}
+
+function tabKeyPressed() {
+    if(!ctrlInfo) {
+        ctrlInfo = true;
+        showInfoBox();
+    } else {
+        focusNextElement($(":focus"));
+    }
+}
+
+function showInfoBox() {
+    $("#keyboard-ctrl-info").show();
+    $("#keyboard-ctrl-info").focus();
+}
+
+function focusNextElement(currentFocus) {
+    if(currentFocus.hasClass("result")) {
+        focusNextResult(currentFocus);
+    } else if(false) {
+
+    } else {
+        focusResult();
+    }
+}
+function focusResult() {
+    $("div[data-index='"+ currentResultIndex + "'").focus();
+    n = $(".result").length;
+    currentResultIndex = 1 + currentResultIndex % n;
+    console.log(currentResultIndex + " - " + n);
+}
+
+function focusNextResult(currentFocus) {
+   if(!currentFocus.next().focus()) {
+        alert("test");
+    }
+    console.log(currentFocus);
+}
\ No newline at end of file
diff --git a/resources/js/utility.js b/resources/js/utility.js
index 9e958be17afca4a74382ad580c24692191be8ef0..4a94950271def55a3b887de3b0bfaee2a4a4dbd9 100644
--- a/resources/js/utility.js
+++ b/resources/js/utility.js
@@ -1,41 +1,4 @@
 $(document).ready(function () {
   $('.js-only').removeClass('js-only');
   $('.no-js').addClass('hide');
-});
-
-// Flag used for checking if the user was shown the keyboard control information
-ctrlInfo = false;
-currentResultIndex = 1;
-
-document.onkeydown = checkKey;
-function checkKey(e) {
-
-    e = e || window.event;
-
-    if (e.keyCode == '9') {
-        e.preventDefault();
-        guideThroughMenu($(document.activeElement));
-    }
-
-}
-
-function guideThroughMenu(focused) {
-    if(!ctrlInfo) {
-        ctrlInfo = true;
-        showInfoBox();
-    } else {
-        focusNextResult();
-    }
-}
-
-function showInfoBox() {
-    $("#keyboard-ctrl-info").show();
-    $("#keyboard-ctrl-info").focus();
-}
-
-function focusNextResult() {
-    $("div[data-index='"+ currentResultIndex + "'").focus();
-    n = $(".result").length;
-    currentResultIndex = 1 + currentResultIndex % n;
-    console.log(currentResultIndex + " - " + n);
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/resources/less/metager/pages/resultpage/keyboard-ctrl.less b/resources/less/metager/pages/resultpage/keyboard-ctrl.less
index af67c504469a200011276fbdd55f0ca2cd3e388c..82e3aa9d63fa95c85aa356823c68a5b2feebaa6e 100644
--- a/resources/less/metager/pages/resultpage/keyboard-ctrl.less
+++ b/resources/less/metager/pages/resultpage/keyboard-ctrl.less
@@ -16,5 +16,12 @@
 
     .keyboard-ctrl-info-header{
         text-align: center;
+        h5 {
+            font-weight: bold;
+        }
+    }
+
+    ul {
+        text-align: left;
     }
 }
\ No newline at end of file
diff --git a/resources/views/layouts/ad.blade.php b/resources/views/layouts/ad.blade.php
index dc010c73d12cde5d72ddcc16741f62502a050eef..c7cd6e4d64f65824dc1b6ce8a1ed061d83ff43eb 100644
--- a/resources/views/layouts/ad.blade.php
+++ b/resources/views/layouts/ad.blade.php
@@ -1,5 +1,5 @@
 @if(isset($ad)  && !$apiAuthorized)
-	<div class="result ad">
+	<div class="result ad" tabindex="0">
 		</span>
 		<div class="result-header">
 			<div class="result-headline">
diff --git a/resources/views/layouts/keyboardNavBox.blade.php b/resources/views/layouts/keyboardNavBox.blade.php
index 3d6558e26495e62c286ed4b0ba72ef10f0d17348..453cc367bd9582efc7632b358516869480d16be3 100644
--- a/resources/views/layouts/keyboardNavBox.blade.php
+++ b/resources/views/layouts/keyboardNavBox.blade.php
@@ -1,30 +1,15 @@
-<!-- Modal HTML 
-<div id="myModal" class="modal fade" tabindex="-1">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">Confirmation</h5>
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                </div>
-                <div class="modal-body">
-                    <p>Do you want to save changes to this document before closing?</p>
-                    <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary">Save changes</button>
-                </div>
+<div id="keyboard-ctrl-info" tabindex="0">
+    <div class="keyboard-ctrl-info-content">
+        <div class="keyboard-ctrl-info-header">
+            <h5 class="keyboard-ctrl-info-title">Tastatur-Navigationsanleitung</h5>
+            <div class="keyboard-ctrl-info-body">
+                <p>Die Navigation durch die Ergebnisseite ist hierarchisch aufgebaut.</p>
+                <ul>
+                    <li>TAB-Taste: Innerhalb der aktuellen Ebene zum nächsten Element springen.</li>
+                    <li>Enter-Taste: Aktuelles Element auswählen und eine Stufe tiefer gehen.</li>
+                    <li>Escape-Taste: Eine Ebene nach oben springen.</li>
+                <ul>
             </div>
         </div>
     </div>
-
-    -->
-    <div id="keyboard-ctrl-info" tabindex="0">
-        <div class="keyboard-ctrl-info-content">
-            <div class="keyboard-ctrl-info-header">
-                <h5 class="keyboard-ctrl-info-title">Tastatur-Navigationsanleitung</h5>
-                <div class="keyboard-ctrl-info-body">
-                </div>
-            </div>
-        </div>
-    </div>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php
index e04ee81ab3f8ff1d8e8d45b92f03cc8af99fc234..e12011ec72ecde43419161a55f3c9552121ad885 100644
--- a/resources/views/layouts/result.blade.php
+++ b/resources/views/layouts/result.blade.php
@@ -1,4 +1,4 @@
-<div class="result" data-count="{{ $result->hash }}">
+<div class="result" data-count="{{ $result->hash }}" data-index="{{$index}}" tabindex="0">
 	<div class="result-header">
 		<div class="result-headline">
 			<h2 class="result-title" title="{{ $result->titel }}">
diff --git a/resources/views/resultpages/results.blade.php b/resources/views/resultpages/results.blade.php
index 0775be1f294fb391921e1f61512fadfed535c7d9..f250677d49e9b6e369f6f1fe83eb17dc86e0861c 100644
--- a/resources/views/resultpages/results.blade.php
+++ b/resources/views/resultpages/results.blade.php
@@ -18,7 +18,7 @@
 				@include('layouts.ad', ['ad' => $metager->popAd()])
 			@endif
 		@endif
-		@include('layouts.result', ['result' => $result])
+		@include('layouts.result', ['result' => $result, 'index' => $index + 1])
 	@endforeach
 	@include('parts.pager')
 </div>
diff --git a/webpack.mix.js b/webpack.mix.js
index aea26fc5dfa049d8924766b4d82fc0df3693016d..bf2dbd545f9f45e0a555541ddc9861935b3a05ca 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -68,7 +68,7 @@ mix
   .babel("resources/js/bitpay.js", "public/js/bitpay.js")
   // utility
   .babel(
-    ["resources/js/utility.js", "resources/js/translations.js"],
+    ["resources/js/utility.js", "resources/js/keyboardNavigation.js", "resources/js/translations.js"],
     "public/js/utility.js"
   )
   .babel("resources/js/widgets.js", "public/js/widgets.js")