1

我正在实现W3C 的 WCAG2.0 技术文档中描述的跳转到主要内容技术，但是在激活链接时我正在努力更新键盘焦点。（请注意，我正在最新的 Chrome 公开版本上对此进行测试）。

首先，这是我的 JavaScript 函数：

function skipToMainContent() {
    var hash = window.location.hash.substring(1);
    if (hash === "main") {
        var el = document.getElementById(hash);
        el.tabIndex = 0;
        el.focus();
    }
}
skipToMainContent();

这个函数的作用是首先hash从 URL 中拉取 ; 并删除#; 然后它检查哈希变量的值是否等于“main”；如果是这样，它就会获取我们的id="main"元素，将其设置tabIndex为 0 以使其可聚焦，然后赋予它焦点。

如果我访问http://example.com/#main，该skipToMainContent()函数被触发并且我的键盘焦点被相应地设置。当我点击我的内容区域中tab的第一个交互元素时，我会集中注意力。main（请注意，如果没有此功能，Chrome 会将第一个交互元素集中在页面上，因此此功能在这里肯定有效）。

但是，当我尝试通过页面上的链接触发此功能时，上述内容不适用：

<a href="#main" onclick="skipToMainContent()">
    Skip to Main Content
</a>
<nav>...</nav>
<main role="main" id="main">...</main>

单击我的“跳到主要内容”链接后，该skipToMainContent()功能被适当地触发，并且我的main元素被赋予了tabIndexof 0，但它似乎没有得到关注。如果我tab在单击我的链接后按下键，则我的第一个交互元素将nav被聚焦。

我需要做什么来确保当我的“跳过”链接被点击时，我的main元素被聚焦？

请注意，我已经尝试在调用之前添加this.blur()和添加，但是下一个重点元素是我的“跳过”链接。document.activeElement.blur()el.focus()

4

1 回答 1

3

根据您的评论，“window.location.hash”在点击时为空。

我还建议您应用tabindex="-1"而不是 0，这意味着主要是在标签顺序中。使用 -1 意味着您可以以编程方式关注元素，但它不是默认顺序。

此外，对于后代（以及后来发现这一点的人），我通常的解决方案是使用这样的东西：

HTML 跳过链接：

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

HTML 目标：

<main role="main" id="main" tabindex=”-1”&gt;

JS：

$("#skiplink").click(function() {
    $('main').focus();
});

CSS：

main:focus {outline: 0;}

当然，您可以通过 JavaScript 应用更多内容，这取决于您。

将 tabindex 属性放在 HTML 中可能会有所帮助。

于 2013-11-08T12:54:54.040 回答