IE问题：标签焦点错误答案

【问题标题】：IE issue: wrong tab focusIE问题：标签焦点错误
【发布时间】：2017-10-12 17:59:04
【问题描述】：

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

IE 中的场景：

按 Tab - “跳过导航”出现在页面上 - 按 Enter - 使用添加到 url 的#main 刷新页面 - 按 Tab - “跳过导航”出现在页面上

有没有人知道 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/

【问题讨论】：

标签： javascript html css internet-explorer accessibility

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

将tabindex="-1" 添加到div，不需要javascript。

以下内容在 IE11 中为我工作。

#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" tabindex="-1">
  Main Content On The Page <a href="/">Link</a>
</div>

【讨论】：