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

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();

这个函数所做的是首先拉取 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元素被赋予 tabIndex的 0 ，但是它似乎没有集中注意力。如果我在点击我的链接后按下 tab 键，我的 nav 中的第一个交互元素。而是专注于。

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

请注意，我尝试同时添加 this.blur()和 document.activeElement.blur()打电话前 el.focus() ，但有了这个，下一个重点元素又是我的“跳过”链接。

Answer 1

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

我还建议您应用 tabindex="-1" 而不是 0，这意味着 main 在 tab 顺序中。使用 -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 中可能会有所帮助。