Question

在Firefox中可以完美运行，但在chrome和safari中却存在问题

按TAB键时link 1被聚焦（如预期的那样），在chrome和safari中出现问题。但是当第二次按下TAB时，什么也没有发生。理想情况下，焦点应移至dropdown 1。再次按下Tab键即可使用。

预期具有与firefox相同的行为。

* {
  margin: 0;
  padding: 0;
}
.menu ul {
  list-style: none;
}
.menu ul > li {
  display: inline-block;
  position: relative;
}
.menu ul > li a {
  display: block;
  padding: 5px 10px;
}
.menu ul > li > ul {
  position: absolute;
  display: none;
}
.menu ul > li.open > ul,
.menu ul > li:hover > ul {
  display: block;
}

<div class="menu">
  <ul>
    <li tabindex="0"><a href="#">Link 1</a></li>
    <li tabindex="0" ><span>dropdown 1</span>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </li>
    <li tabindex="0"><a href="#">Link 2</a></li>
    <li tabindex="0"><a href="#">Link dropdown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您的问题的解决方案是将负分页索引（tabindex="-1"）添加到<li>内部的链接。

有关tabindex的更多详细信息，您可以阅读此内容。

https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

* {
  margin: 0;
  padding: 0;
}
.menu ul {
  list-style: none;
}
.menu ul > li {
  display: inline-block;
  position: relative;
}
.menu ul > li a {
  display: block;
  padding: 5px 10px;
}
.menu ul > li > ul {
  position: absolute;
  display: none;
}
.menu ul > li.open > ul,
.menu ul > li:hover > ul {
  display: block;
}

<div class="menu">
  <ul>
    <li tabindex="0"><a tabindex="-1" href="#">Link 1</a></li>
    <li tabindex="0" ><span>dropdown 1</span>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </li>
    <li tabindex="0"><a tabindex="-1" href="#">Link 2</a></li>
    <li tabindex="0"><a href="#">Link dropdown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </li>
  </ul>
</div>

tabindex在chrome和Firefox中无法正常工作

1 个答案: