通过锚链接实现跳转到主要内容技术时更新键盘焦点

Question

我正在实现W3C's WCAG2.0 Techniques documentation 中描述的跳转到主要内容 技术，但是在激活链接时我正在努力更新键盘焦点。 （请注意，我正在最新的公开版 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();

这个函数的作用是首先从URL中拉出hash，然后删除#；然后它检查哈希变量的值是否等于“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 元素被赋予tabIndex 或0，但它没有出现集中注意力。如果我在点击我的链接后点击 tab 键，我的nav 中的第一个交互元素将被聚焦。

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

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

Answer 1

根据您的评论，“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”>

JS：

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

CSS：

main:focus {outline: 0;}

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

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