强制标签焦点答案

【问题标题】：Forced Tab Focus强制标签焦点
【发布时间】：2017-06-25 00:44:23
【问题描述】：

我有一个与以下代码相关的问题。当用户标签进入窗口时，该代码用于强制焦点到“#skiptocontent”元素。我遇到的问题是，当我在整个站点中一直使用标签并再次到达地址栏时，我无法将标签返回到窗口中。有什么建议为什么会发生这种情况？ & 也许是更好的方法来实现这一点？

$(window).keydown(function(e) {
  if(e.keyCode === 9 && $("#skiptocontent a") !== undefined && $("#skiptocontent a").attr("data-focused") === "false") {    
    $("#skiptocontent a").focus();
    $("#skiptocontent a").attr("data-focused", "true");
    return false;
  } 
  return true;
});

【问题讨论】：

元素是否真的有标签索引？（编辑：我看错了，但使用标签索引似乎仍然是解决方案）
不要这样做。改为tabindex="1"。
强制焦点到特定元素不利于可访问性，您应该让浏览器本地处理它。 tabindex 和 autofocus 等属性可用于告诉浏览器您希望发生什么。
@Ryan - 通常不鼓励使用 tabindex=1，因为它会导致标签排序混乱 - Don’t Use Tabindex Greater than 0
@Ryan - 决定不使值 >1 无效与认可该用法不同。这不仅仅是某个人的博客文章 - 它是由在 A11y 领域受人尊敬的几个人的multiple posts。无论如何，我认为它实际上不会在这里起到修复作用：您将跳到带有正标签索引的那个链接，但下一个标签会带您回到顶部 - 到您可能想要的内容试图跳过。

标签： javascript accessibility tabindex

【解决方案1】：

当用户标签进入窗口时，该代码用于强制焦点到“#skiptocontent”元素。

让您的跳过链接成为页面的第一个可选项卡元素

代码：

<body>
   <a href="#content" id="skipcontent">Skip to main content</a>

删除 javascript。
就是这样。

注意：如果你想让跳过链接不可见，除非它被聚焦，我不鼓励这样做，因为它不能用于无键盘辅助设备，有很多 CSS 唯一的解决方案（例如。@ 987654321@)

【讨论】：