Question

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

IE中的场景：

按下选项卡 - 页面上显示“跳过导航” - 按Enter键 -   刷新页面，将#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/

Answer 1

我认为如果它不符合你描述的标准方式，你有两个选择：

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

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

IE问题：错误的标签焦点

2 个答案: