vollständige Website-Steuerung mit Tastatur (keine Maus)?

Question

So begann ich eine Website zu erstellen (html, css, js ..) und ich möchte meine Website so gestalten, dass es für jemanden ohne Maus (nur eine Tastatur) möglich ist, es zu benutzen.

Wenn ich ein div oder li Element haben, wie kann ich es Fokus mit Tab oder Pfeil nach unten auf der Tastatur bekommen machen?

Beispiel:

<ul class="nav-ul"> 
<li> 
    <a href="" class="nav-link" id="link-home">1 
     <img src="assets/home.png"> 
    </a> 
</li> 
<li> 
    <a href="" class="nav-link" id="link-home">2 
     <img src="assets/home.png"> 
    </a> 
</li> 
<li> 
    <a href="" class="nav-link" id="link-home">3 
     <img src="assets/home.png"> 
    </a> 
</li> 
<li> 
    <a href="" class="nav-link" id="link-home">4 
     <img src="assets/home.png"> 
    </a> 
</li> 
<li> 
    <a href="" class="nav-link" id="link-home">5 
     <img src="assets/home.png"> 
    </a> 
</li> 
<li> 
    <a href="" class="nav-link" id="link-home">6 
     <img src="assets/home.png"> 
    </a> 
</li> 
<li> 
    <a href="" class="nav-link" id="link-home">7 
     <img src="assets/home.png"> 
    </a> 
</li> 

Hier möchte ich jedes li Element den Fokus zu gewinnen, wenn Pfeil nach unten auf der Tastatur gedrückt wird.

EDIT:
tabindex funktioniert nicht! Ich habe es auf viele verschiedene Arten versucht. Ich möchte den gleichen Effekt haben wie wenn ich darüber schwebe.

EDIT 2

Also werde ich meine Frage klar machen. Ich möchte NICHT Tab verwenden, sondern es wird ein D-Pad (links, rechts, oben und unten Pfeile).

Vielen Dank.

Answer 1

Die einfachste Möglichkeit, dies zu erreichen, ist die Verwendung des Attributs tabindex.

<li> 
    <a href="" class="nav-link" id="link-home" tabindex='7'>7 
     <img src="assets/home.png"> 
    </a> 
</li> 

prüfen einige Beispiele here

EDIT mit linken und rechten Pfeil Navigation:

document.addEventListener("keydown", function (e) { 
    var focused = document.activeElement || document.body, 
     focusables= document.getElementsByClassName("focusable"), 
     len = focusables.length, 
     step = 0; 
    focusables = Array.from(focusables).sort(function(a,b) { 
     return parseInt(a.tabIndex) - parseInt(b.tabIndex); 
    }); 
    if (e.keyCode === 39) { 
     step = 1 
    } 
    if (e.keyCode === 37) { 
     step = -1 
    } 

    if (focused.tabIndex <0 || focused.tabIndex === len - 1 && step === 1) 
     focusables[0].focus() 
    else if (focused.tabIndex === 0 && step === -1) 
     focusables[len-1].focus() 
    else 
     focusables[focused.tabIndex+step].focus() 
}); 

Alles, was Sie tun müssen, ist Ihre Elemente so zu machen:

<a href="" class="nav-link focusable" id="link-home" tabindex="0">1 
    <img src="assets/home.png"> 
</a> 

Klasse Hinzufügen focusable und Einstellung tabindex Arbeits example

Answer 2

Ist das, was Sie suchen?

var target = 1; 
 
downarrow(); 
 
uparrow(); 
 
function downarrow() { 
 
    $(document).keydown(function(e){ 
 
    if (e.keyCode == 40) { 
 
     $('#' + target).addClass('active'); 
 
     $('#' + target).focus(); 
 
     $('a').not($('#' + target)).removeClass('active'); 
 
     target++; 
 
    } 
 
    if (target === 8) { 
 
    target = 1; 
 
    }; 
 
    }); 
 
}; 
 
function uparrow() { 
 
    $(document).keydown(function(e){ 
 
    if (e.keyCode == 38) { 
 
     target--; 
 
     if (target === 0) { 
 
     target = 7; 
 
     }; 
 
     $('#' + target).addClass('active'); 
 
     $('#' + target).focus(); 
 
     $('a').not($('#' + target)).removeClass('active'); 
 
    } 
 
    }); 
 
};

a.active { 
 
    background-color: #b2b2b2; 
 
    outline: 1px solid red ; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="nav-ul"> 
 
<li> 
 
    <a id="1" href="" class="nav-link" id="link-home">1 
 
     <img src="assets/home.png"> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a id="2" href="" class="nav-link" id="link-home">2 
 
     <img src="assets/home.png"> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a id="3" href="" class="nav-link" id="link-home">3 
 
     <img src="assets/home.png"> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a id="4" href="" class="nav-link" id="link-home">4 
 
     <img src="assets/home.png"> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a id="5" href="" class="nav-link" id="link-home">5 
 
     <img src="assets/home.png"> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a id="6" href="" class="nav-link" id="link-home">6 
 
     <img src="assets/home.png"> 
 
    </a> 
 
</li> 
 
<li> 
 
    <a id="7" href="" class="nav-link" id="link-home">7 
 
     <img src="assets/home.png"> 
 
    </a> 
 
</li>

https://jsfiddle.net/jpjr1nbt/5/

Bemerkungen:

Wenn Sie auch Pfeil nach oben bis blättern. der keyCode ist 38