辅助功能跳过导航菜单更改视觉焦点，而不是选项卡焦点 - 我该如何解决这个问题答案

【问题标题】：Accessibility skip nav menu changes visual focus, not tab focus - how do I fix this辅助功能跳过导航菜单更改视觉焦点，而不是选项卡焦点 - 我该如何解决这个问题
【发布时间】：2012-02-07 16:43:00
【问题描述】：

我有一个使用命名锚点跳转到内容区域的可访问性跳过导航菜单。

这些内容区域（顶部菜单、左侧菜单、主体内容和页脚菜单）内部也有链接。

当我进入跳过导航菜单并单击其中一个链接时，它会将视觉焦点正确地移动到相关内容区域。

但是，如果我再次使用 tab 键，它会继续通过剩余的跳过导航项进行 tab 键。

我期待它通过我刚刚“跳转”到的内容区域内的链接进行标签。

目前我没有在任何元素上使用标签索引

我正在使用 HTML5，想知道是否可以通过编程将我刚刚“跳转”到的元素的选项卡索引更改为 1，希望它会强制选项卡从一个新位置开始。

这对可访问性有害吗？

为任何帮助或建议干杯

【问题讨论】：

您有相关页面的链接吗？如果没有，你有可以放的代码示例吗？
您在哪些浏览器上进行了测试？ IE（哪个版本？）、Firefox、webkit、Opera？
Windows 8 - 发生在 Firefox、Chrome、IE11 以及 Opera 和 Safari 上还有另一个问题，即当我点击标签时它们只是跳转到页面上的第一个输入...

标签： jquery html css accessibility

【解决方案1】：

我们最近遇到了同样的问题，发现了两个不同的浏览器错误...

在 IE 中，您要跳转到的元素必须具有指定的宽度才能使功能正常工作。

http://webaim.org/techniques/skipnav/#iequirk

它也发生在 Webkit (Chrome/Safari) 中，尽管 AFAIK 没有针对这些浏览器的修复程序（很高兴得到纠正，但如果有人知道的话！）

http://code.google.com/p/chromium/issues/detail?id=37721

使用 tabindex 通常不是一个好主意，而是尝试在逻辑上构建 HTML，以便 tab 顺序自行正确流动

【讨论】：

有趣 - 这些可能应该被报告为错误，如果他们还没有的话。
发生在 Firefox 中也可以防止任何人想知道。感谢 HeyHudson 提供这些链接。我还没有添加跳过导航链接。我想我会这样做的。