用键盘完全控制网站（没有鼠标）？

Question

所以我开始创建一个网站（html，css，js ..），我想设计我的网站，以便没有鼠标的人（只是一个键盘）可以使用它。

如果我有div或li元素，如何通过键盘上的标签或向下箭头使其获得焦点？

示例：

<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>

在这里，我希望每个li元素在键盘上按下向下箭头时获得焦点。

修改
tabindex不工作！我尝试了很多不同的方式。我希望获得与将鼠标悬停在其上时相同的效果。

编辑2

所以我会清楚地提出我的问题。我不想使用标签，而是使用D-pad（左，右，顶部和底部箭头）。

谢谢。

Answer 1

实现此目标的最简单方法是使用tabindex属性。

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

查看一些示例here

修改 使用左右箭头导航：

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()
});

你需要做的就是制作这样的元素：

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

添加课程focusable并设置tabindex 工作example

Answer 2

这是你在找什么？

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/

说明：

如果您还想向上滚动箭头。 keyCode是38