javascript - IE 问题 : wrong tab focus

Question

我在页面的最顶部有一个名为“Skip Navigation”的链接，每次用户按 Tab 键时都会出现在屏幕上，如果他在“Skip Navigation”处于焦点状态时按 Enter，它会将他带到#main 页面的一部分，这样他就可以跳过顶部导航并直接进入主要区域。这一切在 Chrome、Firefox、Safari 中都能完美运行。该问题出现在 IE 中(我测试了 ie9 和 ie11)。

Scenario in IE:

Presses Tab - "Skip Navigation" appears on the page - presses Enter - refreshes the page with #main added into the url - presses Tab - "Skip Navigation" appears on the page

有谁知道 IE 强制跳过导航并转到页面主要部分的解决方案吗？任何帮助将不胜感激。

#skip a {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#skip a:focus {
  left: auto;
  font-size: 20px;
  position: static;
  width: auto;
  height: auto;
}

nav {
  background: #847577;
  color: white;
  padding: 1em;
  text-align: center;
}

nav a {
  color: white;
}

#main {
  background: #E5E6E4;
  padding: 1em;
}

#main a {
  color: black;
}

<div id="skip"><a href="#main">Skip navigation</a></div>
<nav>
  <a href="/">Home</a>
  <a href="/">About Us</a>
</nav>
<div id="main">
  Main Content On The Page <a href="/">Link</a>
</div>

jsfiddle:https://jsfiddle.net/13p0eo43/

Answer 1

如果它不能按照您描述的标准方式工作，我认为您有两种选择:

1. 使用 JavaScript .focus() 方法聚焦#main 之后的第一个可聚焦元素。您在这里的困难在于确定必须关注哪个元素，因为它可能并不总是那么简单。
2. 在#main 上设置 tabindex=-1 并在单击链接时使用 JavaScript .focus() 方法聚焦#main。下次用户按下 tab 键时，下一个可聚焦的元素将获得焦点，并且 #main 在按下 shift+tab 时无法再次聚焦(因为值为 -1)。